我正在工作的站点上有手风琴。它有一个令人讨厌的错误,我不知道。

如果单击箭头,则手风琴将正确打开和关闭。如果单击标题,则手风琴将打开,但在您尝试将其关闭时只会弹起。

标题和箭头都在同一个锚点内,所以我理解为什么会这样。

代码是:

<div class="accordion">
    <div class="accordion-section">

        <div class="tab">
            <a class="accordion-title accordion-section-button l2" href="#accordion-205">
                <h3>How do you differ from estate agents?</h3>
             </a>

             <div id="accordion-205" class="accordion-section-content">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ante eget quam volutpat, ac pulvinar massa ornare.</p>
             </div>
         </div>


         <div class="tab">
             <a class="accordion-title accordion-section-button l2" href="#accordion-204">
                 <h3>Why would an estate agent prefer speaking or dealing with yourself?</h3>
             </a>
             <div id="accordion-204" class="accordion-section-content">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ante eget quam volutpat, ac pulvinar massa ornare.</p>
              </div>
        </div>

    </div>
</div>

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-button').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-button').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

           // Add active class to section title
           $(this).addClass('active');
           // Open up the hidden content panel
           $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

        e.preventDefault();
    });
});

最佳答案

主要问题是以下行:

if($(e.target).is('.active')) {


当您单击<h3>时,元素e.target将是<h3>而不是<a>。而是尝试这样的事情:

if($(this).is('.active')) {


请注意,这现在与您进一步添加该类的行一致。

关于javascript - Accordion 没有关闭,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46145127/

10-12 00:14
查看更多