jquery展开/折叠?
我试着让我的jQuery扩大的任何地方点击时(除了左上框),并尝试只在(左上框),当点击崩溃jquery展开/折叠?
HTML:
<div id="box">
<div class="collapsed container" >
<div class="nav" class="closed">0</div>
box 1 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
<div class="collapsed_content">
collapsed only content #1
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 2 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 3 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
</div>
的JavaScript:
$("#box").delegate(".container", "click", function(e) {
$(this).addClass("expanded");
});
$("#box").delegate(".container.expanded .nav ", "click", function(e) {
$(this).addClass("collapsed");
});
似乎是几乎没有,但不大,这将是这样做的正确方法?由于切换似乎不是这里的选项。
在这里你去队友...
$("#box").delegate(".container", "click", function(e) {
if ($(e.target).hasClass("container")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container.expanded .nav", "click", function(e) {
$(this).parent().removeClass("expanded");
e.stopPropagation();
});
类“坍塌”永远不会被删除,以便删除您需要使用removeClass("expanded")
扩张状态,所以它可以追溯到其初始州。此外,单击.nav元素时,要影响的div是父级。
最后,e.stopPropagation()
停止点击触发两个事件处理程序并删除类,然后再次添加它。
这里有一个工作的jsfiddle ...
左上角仍然展开该框:'我试图让我的jquery在任何地方点击展开(除了左上角的框),并且只在(左上框)中点击时尝试折叠' – 2012-03-08 20:37:34
是的确的确有多个框1页这也是首先扩大的问题。 – Rubytastic 2012-03-08 20:42:23
我已经添加了额外的代码来检查被单击的元素是什么,所以它只会在容器时执行。 – Archer 2012-03-08 20:43:56
$("#box").delegate(".container", "click", function(e) {
if (!$(e.target).is("div.nav")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container .nav ", "click", function(e) {
$(this).parent().removeClass("expanded").addClass("collapsed");
});
是否使用.delegate(),因为该元素是不是在页面上开始?此外,自从jQuery 1.7开始,.delegate()已被弃用,以支持.on()。 – j08691 2012-03-08 20:25:47
@ j08691 - '委托()'不被弃用,'活着'是。 – ShankarSangoli 2012-03-08 20:26:31
@ShankarSangoli - 真的吗?请先阅读[docs](http://api.jquery.com/delegate/):“从jQuery 1.7开始,.delegate()已被.on()方法取代。” – j08691 2012-03-08 20:29:26