切换不工作时,打开/关闭手风琴
问题描述:
HTML
<div id="accordion">
<h1 class="name">Cat<i class="fa fa-chevron-down"></i></h1>
<div class="accordion-content">
content content 1
</div>
<h1 class="name">Cow<i class="fa fa-chevron-down"></i></h1>
<div class="accordion-content">
content content 2
</div>
</div>
JQuery的
$('#accordion h1').on('click', function(event){
event.stopPropagation();
event.preventDefault();
var openMenu = $('#accordion .active').next('.accordion-content');
if(event.handled !== true) {
openMenu.velocity("slideUp", function() {});
if ($(this).hasClass('active')){
$(this).removeClass('active');
$('i',this).removeClass('fa-chevron-up');
$('i',this).next().addClass('fa-chevron-down');
} else{
$(this).next('.accordion-content').velocity("slideDown", function() {});
$('#accordion h1').removeClass('active');
$(this).addClass('active');
console.log('no active but added active');
console.log($('i', this) + "here i");
$('i',this).removeClass('fa-chevron-down');
$('i',this).not('fa-chevron-up').addClass('fa-chevron-up');
}
event.handled = true;
} else {
return false;
}
});
如小提琴,当点击H1一次又一次两次,箭头:上下切换正确。
但是当点击另一个h1时,然后“打开”的手风琴内容将关闭并打开另一个手风琴内容。所以箭头应该相应地切换。
当点击另一个h1时,其手风琴内容将打开,h1将显示向上箭头。
当再次点击另一个不同的h1时,先前打开的内容将关闭,h1将显示向下箭头,并且新内容将在h1上向上箭头打开。
偶试过
$('i', this).toggleClass('fa-chevron-down fa-chevron-up');
但它不工作要么。
如何根据开/关手风琴内容改变箭头?
答
分开你的CSS
.accordion-content1 {
display: none;
}
.accordion-content2 {
display: none;
}
jQuery中添加一些代码,这样的..
$(".accordion-content1").css("display", "inline"); // for first one
答
我觉得这可能是一个解决方案
的Javascript
$('#accordion h1').on('click', function(event){
event.stopPropagation();
event.preventDefault();
var openMenu = $('#accordion .active').next('.accordion-content');
if(event.handled !== true) {
openMenu.velocity("slideUp", function() {});
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).children('i').removeClass('fa-chevron-up');
$(this).siblings().children('i').addClass('fa-chevron-down');
$(this).children('i').addClass('fa-chevron-down');
} else{
$(this).next('.accordion-content').velocity("slideDown", function() {});
$('#accordion h1').removeClass('active');
$(this).addClass('active');
console.log('no active but added active');
console.log($('i', this) + "here i");
$(this).children('i').removeClass('fa-chevron-down');
$(this).children('i').addClass('fa-chevron-up');
$(this).siblings().children('i').addClass('fa-chevron-down');
}
event.handled = true;
} else {
return false;
}
});
5秒修复。 http://jsfiddle.net/v9cnLky0/2/ - 因为我没有足够彻底地检查,所以没有发帖作为回答。 – techfoobar 2015-04-01 05:32:23
查看我的回答 – 2015-04-01 05:38:24