[英]Accordion open/close all content button and more
我在网站内具有响应式手风琴功能,我想用一个按钮来(打开)和(关闭)所有内容,并且在关闭所有内容时也将其内容名称更改为(打开),并在所有内容打开时将其内容名称更改为(关闭)。
同样,现在当使用(打开)按钮时,已经打开的内容再次关闭,并且当内容关闭时,加号和减号图标无法正确显示(减号)图标,反之亦然。
这是小提琴
有人可以帮我弄这个吗?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
如果在切换发生后检查active
类别,则可以根据切换的活动类别是否激活来更改按钮的文本。
查看此更新的小提琴 (也已编辑以更改图标)
要使用按钮更改减号/加号图标,您必须选择具有parent()和child()jQuery方法的特定.header类,如下所示:
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
你去了: http : //jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
有时使用拨动开关可能会有些棘手和混乱。
在这种情况下,我使用“ hasClass”来确定项目是否已经打开。 由于我们只有“打开”和“关闭”状态,因此可以说,只要“打开”不是“活动”(类处于活动状态),就应该在所有标头和内容中添加“活动”类标志。 相反的情况也一样。 这样可以确保已切换的项目不会被重新切换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.