[英]jQuery - Toggle div class on click
不,这不是一个直接的切换问题。 我知道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');
});
});
});
$('.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/
首先在需要点击的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>
$('.section').click(function() {
$(this).removeClass('hidden');
});
$('.section-legend').click(function(e) {
var $parent = $(this).parent();
if(!$parent.hasClass('hidden')) {
$parent.addClass('hidden');
return false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.