javascript - jquery展开/折叠？

Question

我试图让我的 jquery 在点击任何地方(左上框除外)时展开，并在仅点击(左上框)时尝试折叠

http://jsfiddle.net/wzbAh/1/

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");
});

好像差不多了，但不完全是，怎样做才是正确的呢？因为切换似乎不是这里的选项。

Answer 1

给你伙计...

$("#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...

http://jsfiddle.net/wzbAh/11/