jQuery-單擊時切換div類

Question

不，這不是一個直接的切換問題。 我知道toggle（）函數以及如何簡單地隱藏/顯示div。 想象一個帶有標簽的盒子：

<div class="section hidden">
    <div class="section-legend">My Section</div>
</div>

當您在整個div上的任意位置單擊時，它應刪除class hidden 。 然后，該框將展開。 現在，該框不是hidden的類，因此不應單擊它。

相反，當您單擊div.section-legend它應該再次向主div添加hidden的類。 顯然，圖例的click事件需要stopPropagation（）。 現在，圖例不再可單擊，您必須再次單擊整個div才能將其打開。

我什么都無法正常工作，而且我知道這是愚蠢的代碼：

$(document).ready(function() {

    $('.section.hidden').click(function() {
        $(this).removeClass('hidden');
        $(this).find('.section-legend').click(function(e) {
            $(this).parent().addClass('hidden');
            e.stopPropagation();
        });
    });

    $('.section-legend').click(function(e) {
        $(this).parent().addClass('hidden');
        e.stopPropagation();
        $(this).parent().click(function() {
            $(this).removeClass('hidden');
        });
    });

}）;

Answer 1

$('.section-legend').live('click',function(){
    $(this).parent().toggleClass('hidden');
});

這是假設section-legend與處於“隱藏狀態”的容器一樣大。

編輯：更改了一些代碼，解決方案是這樣的：

$('.section').live('click',function(){
    $(this).removeClass('hidden');
});
$('.section-legend').live('click',function(){
    $(this).parent().toggleClass('hidden'); return false;
});

return false的把戲！ 演示： http : //jsfiddle.net/RUfN7/2/

Answer 2

首先在需要點擊的div上添加一個onclick事件：

<div id="myDiv" class="section hidden">
    <div class="section-legend" onclick="function1();">My Section</div>
</div>

並將此javascript添加到html

<script language="JavaScript">
    function function1(){
        document.getElementById("myDiv").removeAttribute("class");

    }
</script>

Answer 3

$('.section').click(function() {
    $(this).removeClass('hidden');
});

$('.section-legend').click(function(e) {
    var $parent = $(this).parent();
    if(!$parent.hasClass('hidden')) {
        $parent.addClass('hidden');
        return false;
    }
});