使每个部分中第一个打开的手风琴的图标都以“-”开头，现在它们都以“ +”开头

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>

我希望每个部分的第一手风琴的图标代表打开状态（-）与当前关闭状态图标（+）。 因此，当单击第一个打开的手风琴时，它将关闭并且图标将相应地更改。此外，如果单击另一个伴奏，它将打开，而先前打开的手风琴将关闭

Answer 1

我可以想到的两种方法：

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

2）将该行添加到您的jQuery，紧跟在下滑行之后：

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

无论哪种方式，我想说三件事：

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

2）它是手风琴，不是手风琴。我并不是说要肛门，但是我一定在四次或五次键入此代码时输入了错误的内容。正确拼写，编辑会感谢您。

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

Answer 2

您可以将以下行添加到代码中。它将找到可见的<div class="brand-container"> <div class="tier-top-1"> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> <div class="tier-item"> <img src="https://via.placeholder.com/400x400/?text=Image" /> </div> </div> </div>并找到相关的.accordian-content并向其中添加类.accordian-item。

如果您要打开手风琴的孩子，这将为您提供帮助。

请参见下面的代码段

.accordian-title-icon-open

//Accordian jQuery
    $(document).ready(function () {
        $('.accordian-content').hide();
        $(".accordian .accordian-item:first-child .accordian-content").slideDown();
        /************ ADD BELOW LINE ******************/
        $(".accordian-content:visible").parent().find(".accordian-title-icon").addClass("accordian-title-icon-open");
        /************ ADD ABOVE LINE ******************/
        $('.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;
        }