Javascript jQuery在扩展和收缩时出现手风琴行为异常
我很难找出手风琴上的一个错误。单击箭头图标时,其行为不正常。如果你去,你会看到一些类别隐藏的手风琴。当您单击一个并关闭它时,它会正常工作。但是,如果您单击其中一个,然后在关闭第一个之前单击下面的另一个,您会注意到上面的箭头已返回到其“关闭”位置,而没有关闭它 下面是组成每个手风琴的HTML:Javascript jQuery在扩展和收缩时出现手风琴行为异常,javascript,jquery,html,accordion,Javascript,Jquery,Html,Accordion,我很难找出手风琴上的一个错误。单击箭头图标时,其行为不正常。如果你去,你会看到一些类别隐藏的手风琴。当您单击一个并关闭它时,它会正常工作。但是,如果您单击其中一个,然后在关闭第一个之前单击下面的另一个,您会注意到上面的箭头已返回到其“关闭”位置,而没有关闭它 下面是组成每个手风琴的HTML: <dl class="accordion"> <dt><strong>Accordion Title:</strong>  
<dl class="accordion">
<dt><strong>Accordion Title:</strong> Details</dt>
<dd>Hidden details</dd>
</dl>
及
最后是我用来展开/折叠的jQuery:
function ($) {
//Hide all panels
var allPanels = $('.accordion > dd').hide();
//Show first panel
//$('.accordion > dd:first-of-type').show();
//Add active class to first panel
//$('.accordion > dt:first-of-type').addClass('accordion-active');
//Handle click function
jQuery('.accordion > dt').on('click', function () {
var $this = $(this) ,
$target = $this.next();
jQuery('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active');
$this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp();
return false;
});
}
你知道我遗漏了什么吗?看来你把事情复杂化了一点。您不需要使用“not()”方法来过滤任何内容。您只需要在两种状态(添加/删除类、显示/隐藏元素)之间切换,因此只需要使用代码中已有的两种jQuery方法
jQuery('.accordion > dt').on('click', function () {
var $this = $(this),
$target = $this.next();
$this.toggleClass('accordion-active');
$target.slideToggle();
return false;
});
下面是一个基于您提供的代码的JSFIDLE:
让我知道这是否是您的手风琴的预期功能。您在not()中使用toggle()的长线使此代码很难理解。完美!谢谢@Inoogn这正是我想要的。我在修改别人的代码,我把它复杂化了。干杯:)
function ($) {
//Hide all panels
var allPanels = $('.accordion > dd').hide();
//Show first panel
//$('.accordion > dd:first-of-type').show();
//Add active class to first panel
//$('.accordion > dt:first-of-type').addClass('accordion-active');
//Handle click function
jQuery('.accordion > dt').on('click', function () {
var $this = $(this) ,
$target = $this.next();
jQuery('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active');
$this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp();
return false;
});
}
jQuery('.accordion > dt').on('click', function () {
var $this = $(this),
$target = $this.next();
$this.toggleClass('accordion-active');
$target.slideToggle();
return false;
});