Question

我试图让我的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");
});

似乎几乎在那里，但不完全，这是正确的方法吗？由于切换似乎不是这里的选择。

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

永远不会删除“折叠”类，因此要删除需要使用removeClass("expanded")的展开状态，以便它返回到其初始状态。此外，单击.nav元素时，您要影响的div是父级。

最后，e.stopPropagation()停止点击触发两个事件处理程序并删除该类，然后再次添加它。

这是一个有效的jsfiddle ......

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

Answer 2

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

http://jsfiddle.net/jensbits/wzbAh/9/

jquery扩展/崩溃？

2 个答案: