javascript - make the icon of the first open accordian in each section start with "-", right now they all start with "+"

Question

//Accordian jQuery
    $(document).ready(function () {
        $('.accordian-content').hide();
        $(".accordian .accordian-item:first-child .accordian-content").slideDown();
        $('.accordian-title').click(function () {
            const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
            $(this).parents('.accordian').find('.accordian-title-icon').removeClass('accordian-title-icon-open');
            $(this).parents('.accordian').find('.accordian-content').not($(this).next('.accordian-content')).slideUp();
            $(this).next('.accordian-content').slideToggle();
            if (!flag) {
                $(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')

                //Add this code
               /* thisE = $(this)
                setTimeout(function () {
                    $('html, body').animate({
                        scrollTop: thisE.offset().top -75 }, 'slow');
                }, 450)//Wait for toggle animation to finish */

            } else {
                $(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
            }

        });
    });

.priority-lists {width:100%;}
        .accordian-title {
            width: 100%;
            cursor: pointer;
            padding: 20px 10px 20px 20px;
            font-size: 20px;
        }

        .accordian-item {
            color: rgba(40, 150, 211, 1);
            margin: 10px auto;
            width: 100%;
            max-width: 530px;
            background: #fff;
            border: solid 1px #f0f0f0;
            border-radius: 5px;
            -webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            -moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            -webkit-transition: all .1s ease;
            -moz-transition: all .1s ease;
            -o-transition: all .1s ease;
            transition: all .1s ease;
        }

        .accordian-item:hover {
            -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
            -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
        }

        .accordian .accordian-item .accordian-title .accordian-title-icon {
            background: #dedede;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            display: inline-block;
            text-align: center;
            color: white;
            font-weight: 700;
            margin-right: 0;
            padding: 0 0 0 1px;
            position: relative;
            vertical-align: top;
            float: right;
            opacity: 1;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -o-transition: all .3s ease;
        }



            .accordian .accordian-item .accordian-title .accordian-title-icon:before {
                content: '+';
                display: block;
                position: absolute;
                width: 100%;
                font-size: 21px;
                line-height: 24px;
                margin: -1px;
            }

        .accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
            display: none;
        }

        .accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
            content: '-';
            margin-top: -3px;
            margin-left: -1px;
            display: block;
            position: absolute;
            text-align: center;
            width: 100%;
        }

        .accordian-content {
            color: #3a3a3a;
            padding: 0 20px 20px;
            text-align: left;
        }

        .accordian-content2 {
            color: #3a3a3a;
            padding: 0 20px 20px;
            text-align: left;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="priority-lists">
                <div class="accordian">

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>This is a sentence.</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>This is a sentence</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>this is a sentence</p>
                        </div>
                    </div>

                </div>
                
                <h2>SECTION 2</h2>
                
 <div class="priority-lists">
                <div class="accordian">

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>This is a sentence.</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>This is a sentence</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">TITLE<span class="accordian-title-icon"></span></div>
                        <div class="accordian-content" style="display: none;">
                            <p>this is a sentence</p>
                        </div>
                    </div>

                </div>

I would like the icon for the first accordian of each section represent the open state (-) versus the current closed state icon (+). So when the the first open accordian is clicked it will close and icon will change accordingly. Further, if another accoridian is clicked it will open and the previously open accordian will close

标签： javascriptjqueryhtmlcss

Answer 1

我能想到的两种方法：

1) 只需手动将类“accordian-title-icon-open”添加到每个手风琴项目的第一个跨度。

2) 将此行添加到您的 jQuery 中，就在下滑行之后：

$(".accordian-item:first-child  .accordian-title-icon").addClass('accordian-title-icon-open');

不管怎样，我想说三件事：

1）您的代码似乎过于混乱（例如，您为每个不需要的 .accordian-content 添加了内联样式，因为您将它们全部隐藏在 jQuery 中

2）它是拼写手风琴，而不是手风琴。我不是说这是肛门，但我一定是通过这段代码输入了四五次错误的东西。拼写正确，您的编辑会感谢您。

3）您将来可能希望查看复选框黑客这种事情。它不需要 jQuery 或任何其他外部库。