只关闭自己的部分而不关闭其他部分的 JS 手风琴

Question

现在，如果您单击打开一个部分，此 JS 手风琴将关闭任何其他打开的部分。我需要怎么做才能让它只打开和关闭它自己的部分？

jQuery('.accordion').each(function () {
                            var accordian = jQuery(this);
                            accordian.find('.accordion-head').on('click', function () {
                                jQuery(this).parent().find(".accordion-head").removeClass('open close');
                                jQuery(this).removeClass('open').addClass('close');
                                accordian.find('.accordion-body').slideUp();
                                if (!jQuery(this).next().is(':visible')) {
                                        jQuery(this).removeClass('close').addClass('open');
                                        jQuery(this).next().slideDown();
                                }
                            });
                        });

.accordion {
    width: 100%;
    background-color: #EDEDED;
}
.accordion .accordion-head {
    color: #fff;
    /* background-color: #3A84DE; */
    border-bottom: 1px solid #fff;
    position: relative;
    /* padding: 13px; */
    font-size: 0.87em;
    cursor: pointer;
    overflow: hidden;
}
.accordionTitle {
    text-transform: uppercase;
    font-family: Open Sans,sans-serif;
    font-weight: 600;
    font-size: .85714rem;
    line-height: 1.5;
    background-color: transparent;
    color: #0f71b3;
    margin-left: 8px;
    cursor: pointer;
    display: inline-block;
}
.accordion .accordion-head * {
    cursor: pointer;

}
.accordion .accordion-head h4 {
    float: left;
}
.accordion .accordion-head:hover {
    filter: alpha(opacity=80);
    opacity: 0.80;
}
.accordion .accordion-body {
    border-bottom: 1px solid #fff;
    padding: 6px;
    height: auto;
    display: none;
}
.arrow {
    float: left;
    width: 20px;
    height: 20px;
    margin-bottom: 14px;
    margin-right: 10px;
    border-width: 0 2px 2px 0;
    /* padding: 4px; */
}
.accordion-head.open .arrow {
    transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}


.accordion p{
    margin-left:43px;
}
h4.expand{
  padding-top:20px; 
  padding-left:20px;
  cursor: pointer;     
}
.acc-head-section{
        display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accordion">
                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 1</h4>
            
                </div>
                <div class="accordion-body">
                    <p>Lorum ipsum possum</p>
                </div>
                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 2</h4>
            
                </div>
                <div class="accordion-body">
                    <p>Lorum ipsum possum</p>
                </div>

                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 3</h4>
        
            </div>
            <div class="accordion-body">
                <p>Lorum ipsum possum</p>
            </div>
        </div>

Answer 1

$('.accordion-head').on('click', function()
{
    if($(this).hasClass('open'))
    {
        $(this).removeClass('open').addClass('close');
        $(this).next().slideUp();
    }
    else
    {
        $(this).removeClass('close').addClass('open');
        $(this).next().slideDown();
    }
});

.accordion {
    width: 100%;
    background-color: #EDEDED;
}
.accordion .accordion-head {
    color: #fff;
    /* background-color: #3A84DE; */
    border-bottom: 1px solid #fff;
    position: relative;
    /* padding: 13px; */
    font-size: 0.87em;
    cursor: pointer;
    overflow: hidden;
}
.accordionTitle {
    text-transform: uppercase;
    font-family: Open Sans,sans-serif;
    font-weight: 600;
    font-size: .85714rem;
    line-height: 1.5;
    background-color: transparent;
    color: #0f71b3;
    margin-left: 8px;
    cursor: pointer;
    display: inline-block;
}
.accordion .accordion-head * {
    cursor: pointer;

}
.accordion .accordion-head h4 {
    float: left;
}
.accordion .accordion-head:hover {
    filter: alpha(opacity=80);
    opacity: 0.80;
}
.accordion .accordion-body {
    border-bottom: 1px solid #fff;
    padding: 6px;
    height: auto;
    display: none;
}
.arrow {
    float: left;
    width: 20px;
    height: 20px;
    margin-bottom: 14px;
    margin-right: 10px;
    border-width: 0 2px 2px 0;
    /* padding: 4px; */
}
.accordion-head.open .arrow {
    transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}


.accordion p{
    margin-left:43px;
}
h4.expand{
  padding-top:20px; 
  padding-left:20px;
  cursor: pointer;     
}
.acc-head-section{
        display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accordion">
                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 1</h4>
            
                </div>
                <div class="accordion-body">
                    <p>Lorum ipsum possum</p>
                </div>
                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 2</h4>
            
                </div>
                <div class="accordion-body">
                    <p>Lorum ipsum possum</p>
                </div>

                <div class="accordion-head">
                        <h4 class="accordionTitle"><span class="arrow down"><svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve">
                                <polyline style="fill:none;stroke:#A5A5A5;stroke-linecap:round;stroke-miterlimit:10;" points="1,3 5,7 9,3 "></polyline>
                                </svg></span>Title 3</h4>
        
            </div>
            <div class="accordion-body">
                <p>Lorum ipsum possum</p>
            </div>
        </div>

只关闭自己的部分而不关闭其他部分的 JS 手风琴

JS Accordion that only closes its own section and not other sections

jquery

accordion