手風琴沒有關閉

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