我正在工作的站点上有手风琴。它有一个令人讨厌的错误,我不知道。
如果单击箭头,则手风琴将正确打开和关闭。如果单击标题,则手风琴将打开,但在您尝试将其关闭时只会弹起。
标题和箭头都在同一个锚点内,所以我理解为什么会这样。
代码是:
<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/