我试图让我的 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();
});
“collapsed”类永远不会被删除,因此要删除展开状态,您需要使用 removeClass("expanded")
,这样它就会回到初始状态。此外,当点击 .nav 元素时,您想要影响的 div 是父元素。
最后,e.stopPropagation()
停止点击触发两个事件处理程序并删除类,然后再次添加它。
这是一个有效的 jsfiddle...
关于javascript - jquery展开/折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9624326/