尝试创建手风琴,但我无法弄清楚包装器是否具有活动类。
我的jQuery:
$('.faq_wrap span.plus').on(touchClick, function (e) {
var topEl = $(this).closest('.faq_wrap');
if (topEl.hasClass('active')) {
topEl.removeClass('active');
topEl.find('.answer').slideUp('fast');
return false;
}
topEl.each(function (index, el) {
topEl.removeClass('active');
topEl.find('.answer').slideUp('fast');
});
topEl.find('.answer').slideDown('fast');
topEl.addClass('active');
console.log(topEl);
});
以下是console.log
的输出:
我正在尝试检查.faq_wrap.active
是否已存在。如果是这样,请向下滑动手风琴,然后向下滑动新手风琴。截至目前,此检查被忽略,我可以根据需要一次打开尽可能多的手风琴。想法?
答案 0 :(得分:1)
使用.get()
topEl.get(0).className
答案 1 :(得分:0)
您的HTML中有多个可折叠/可展开的部分,其中只有一个部分将处于活动状态(已展开)。你使用.closest()
但是如果只有一个你也可以使用直接类选择器.faq_wrap.active
(它将返回0或1个元素,具体取决于用户是否已经点击过)。执行topEl.each
也没有意义,因为.closest()
将仅返回最近的节点(此处为父节点)。所以以下应该更好(更简洁)
$('.faq_wrap span.plus').on(touchClick, function (e) {
var topEl = $(this).closest('.faq_wrap'),
activeEl = $('.faq_wrap.active');
if (activeEl.length) { // implied: if it's bigger than 0
activeEl.removeClass('active');
activeEl.find('.answer').slideUp('fast');
}
topEl.find('.answer').slideDown('fast');
topEl.addClass('active');
});
注意:只是想知道,为什么使用return false;
声明?