Question

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

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

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

相反，当您点击div.section-legend时，它应该再次将类hidden添加到主div。显然，图例的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与'hidden state'中的容器一样大。

编辑：更改了一些代码，解决方法是：

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

jQuery - 单击时切换div类

3 个答案: