jQuery - 单击时切换 div 类

不，这不是一个直接的切换问题。我知道toggle() 函数以及如何简单地隐藏/显示div。想象一个里面有标签的盒子：

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

当您单击整个 div 上的任意位置时，它应该删除类hidden。然后盒子看起来就扩大了。现在这个盒子不属于类hidden它不应该是可点击的。

相反，当您单击div.section-legend它应该添加类hidden再次到主div。显然图例的点击事件需要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');
        });
    });

});

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

这是假设部分图例与其处于“隐藏状态”的容器一样大。

编辑：更改了一些代码，解决方案是这样的：

$('.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/ http://jsfiddle.net/RUfN7/2/