手风琴没有关闭

Question

我在我正在研究的网站上有一个手风琴。它有一个恼人的错误，我无法弄清楚。

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

标题和箭头都在同一个锚点内，所以我明白为什么会发生这种情况。

的代码是：

<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(); 
    }); 
}); 

Answer 1

的主要问题是这一行：

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

当你点击<h3>元素e.target将是<h3>，而不是<a>。相反，尝试这样的事：

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

注意，这是现在在其中添加该类进一步下跌的线是一致的。

Answer 2

如果你喜欢，你可以减少一切：

$(document).ready(function() { 
    $('.accordion-section-button').click(function(e) { 
     close_accordion_section(); 
     $(this).toggleClass('active'); 
     $('.accordion ' + this.attributes.href.value)[(this.classList.contains('active')) ? 'slideDown' : 'slideUp'](300) 
        .toggleClass('open'); 
     e.preventDefault(); 
    }); 
});