[英]jQuery Accordion misbehaving when expanding and contracting
我在弄清楚手风琴中的错误时遇到了麻烦。 单击时箭头图标行为异常。 如果您在这里 ,您会看到手风琴隐藏的某些类别。 当您单击一个然后关闭它时,它的行为正常。 但是,如果单击一个,然后在关闭第一个之前单击下面的另一个,则会注意到上面一个的箭头已返回到其“关闭”位置,而没有将其关闭。
这是组成每个手风琴的HTML:
<dl class="accordion">
<dt><strong>Accordion Title:</strong> Details</dt>
<dd>Hidden details</dd>
</dl>
箭头的CSS:
.accordion dt:after {
content: "\f125";
color: #ED4F30;
font-family: "Ionicons";
padding-left: 10px;
}
和
.accordion dt.accordion-active:after {
content: "\f123";
color: #ED4F30;
font-family: "Ionicons";
padding-left: 10px;
}
最后是我用来扩展/折叠的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()”方法来过滤掉任何内容。 您只需要在2个状态之间切换(添加/删除类,显示/隐藏元素),因此您只需要使用代码中已经存在的2个jQuery方法。
jQuery('.accordion > dt').on('click', function () {
var $this = $(this),
$target = $this.next();
$this.toggleClass('accordion-active');
$target.slideToggle();
return false;
});
这是基于您提供的代码的JSFiddle: http : //jsfiddle.net/e5pe5/
让我知道这是否是您手风琴的预期功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.