addClass不起作用（jQuery）

Question

我是jQuery的新手，需要幫助。 我的addClass有點問題

這是HTML：

<div class="first">
    Container 1
    <div class="second hide">
        Some text 1
        <div class="close">close</div>
    </div>
</div>
<div class="first">
    Container 2
    <div class="second hide">
        Some text 2
        <div class="close">close 2</div>
    </div>
</div>

和jQuery

$("div.first").click(function() {
    $("div.first").find("div.second").addClass('hide');
    $(this).find("div.second").removeClass('hide');
});

$("div.close").click(function() {   
    $("div.close").parent().addClass('hide');
    $(this).parent().addClass('hide');
});

我需要的。

1. 單擊容器1.1->顯示容器1.2
2. 單擊容器2.1->顯示容器2.2，隱藏容器1.2
3. 單擊容器1.1->顯示容器1.2，隱藏容器2.2

我上面列出的所有作品。

現在，當單擊“關閉”時，我需要隱藏所有容器x.2。 我認為有沖突，但是我不知道在哪里。

這是http://jsfiddle.net/E69AN/2/

Answer 1

您需要停止close按鈕上click事件的傳播，否則您要單擊關閉，然后立即重新打開div。 嘗試這個：

$("div.first").click(function() {
    $("div.second").addClass('hide');
    $(this).find("div.second").removeClass('hide');
});

$("div.close").click(function(e) {   
    e.stopPropagation();
    $(this).closest('.second').addClass('hide');
});

更新的小提琴

Answer 2

當您單擊.close div時，這將導致調用2 click函數，因為它位於div.first內部。

1. 首先，它執行$("div.close").click(fu.... ，這將導致div.first隱藏。
2. 立即執行$("div.first").click(fu.... ，這將導致顯示div.first

您可以通過e.stopPropagation();防止此行為e.stopPropagation(); ：

 $("div.first").click(function() {
    $(".second").hide();
    $(this).find(".second").show();
});

$("div.close").click(function(e) {    
    e.stopPropagation();
    $(this).parent().hide();
});

jsfiddle