jQuery - 点击切换div类

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

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

当你点击整个DIV的任何地方，它应该删除hidden类。该框然后看起来扩大。现在该框不属于hidden类，它不应该是可点击的。

相反，当您单击div.section-legend时，它应该再次将类hidden添加到主div。很显然，图例的点击事件需要停止传播（）。现在，传说不能再点击了，你必须再次点击整个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'); 
     }); 
    });

}）;

来源

2011-08-02 BadHorsie

人越来越慵懒总是想一个jsfiddle .. – Ben

是一个div.hidden仍然可见不知何故？我不知道它是如何意味着如果它真的“隐藏” – Ben

这不是真隐，'hidden'是类塌陷部分的只是名字是寂静的点击。还有一些其他代码意味着它更有意义，但在这里我可以看到它看起来很混乱。 – BadHorsie

$('.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/

来源

2011-08-02 11:43:25 Willem

不，'section-legend'不能填满整个容器，这就是问题所在。这只是大箱子，当你展开它（即无级'hidden'），其被移动到盒的顶部内的标签。 – BadHorsie

好吧，我更新应解决这个问题，看到的jsfiddle演示 – Willem

知府，谢谢。 – BadHorsie

首先添加的格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>

来源

2011-08-02 11:44:20 Pieter888

对不起，这是不是真的好代码和/或jQuery的。 – BadHorsie

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

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

来源

2011-08-02 11:51:05 sje397

jQuery - 点击切换div类

回答

相关问题