我对JQuery来说相当新,而且我有点糊涂,但按照我的逻辑,下面的应该工作。你能指出什么是错的吗?
我有一堆重复的内容块,其中包含类名.acc-0,acc-1等等,当你点击.plans-breakdown
按钮时,它应隐藏并显示.open-link
坐在街区内
这是.acc-1
$('.acc-1').each(function(){
$(this).find('.open-link').on('click',function() {
$('.plans-breakdown').not(this).css('display','none');
$(this).find('.plans-breakdown').fadeToggle(600);
});
});
HTML;
<div class="schedule-plan acc-0">
<div class="open-link">Floor plan acc-0</div>
<div class="plans-breakdown">
content here
</div>
</div>
</div>
<div class="schedule-plan acc-1">
<div class="open-link">Floor plan acc-1</div>
<div class="plans-breakdown">
content for acc-1 here
</div>
</div>
我希望此功能仅适用于特定代码块。在此示例中.acc-1
。所以我已将该功能包裹在$('.acc-1').each(function(){}
我已使用(this)
指定需要触发该功能的正确.open-link
按钮。此外,在.fadeToggle
操作上,定位嵌套在.plan-breakdown
内的.acc-1
实例
查看我的小提琴,注意第一个块是如何工作的(.acc-0)。当我使用.each
时
它没有。
http://jsfiddle.net/bazzle/Q4zmS/2/
谢谢,
答案 0 :(得分:2)
您可以简单地使用:
// for every element with a acc- class...
$('[class*=acc-]').on('click', function () {
// hide all elements previously shown
$('.plans-breakdown').css('display', 'none');
// fade in the child element
$(this).find('.plans-breakdown').fadeToggle(600);
// for all active links, remove the active class
$('.open-link').removeClass('active');
// add the active class to the child link
$(this).find('.open-link').addClass('active');
});
我还要补充:
.plans-breakdown{
display:none;
}
对你的CSS,不再需要JS:
$('.plans-breakdown').css('display', 'none');
并将CSS更改为以下内容,因为嵌套规则无效:
.schedule-plan {
display:block;
padding-top:.3em;
cursor:pointer;
}
.active {
color:black;
}
.plans-breakdown {
margin:1em 0 2em 0;
cursor:default;
}
.plans-breakdown {
display:none;
}