我想让一个div用jquery和css显示和消失。 该代码不起作用:
HTML
<html>
<head>
</head>
<body>
<div class="box" id="b1">
<a href="#">click to show content</a>
<div class="content">
here is content here is content here is content
<div class="button" id="b2">remove content</div>
</div
</body>
</html>
jQuery
$(document).ready(function() {
$('#b1').click(function() {
$('.content').css({
"display": "block"
});
});
$('#b2').click(function() {
$('.content').css({
"display": "none"
});
});
});
最佳答案
问题在于您没有阻止事件的传播。
当您单击按钮时，它实际上首先会隐藏该元素，但事件会传播到父元素，您会在父元素处捕获单击并再次显示它。它进行得如此之快，看起来好像没有发生任何事情，但实际上，当您单击 #b2 时，元素会被隐藏，然后事件会冒泡到父级 #b1，您已附加点击事件监听器以显示内容。
因此，您需要使用.stopPropagation()在#b2上。
$(document).ready(function(){
$('#b1').click(function(){
$('.content').show();
});
$('#b2').on("click", function(e){
$('.content').hide();
e.stopPropagation();
});
});
您需要做的是将点击事件传递给回调函数(在我的示例中声明为 e)，然后对其调用 stopPropagation() 以使其确保它不会冒泡到父元素。
这是一个工作示例:http://jsfiddle.net/jTgRF/64/
注意 我使用 .show() 和 .hide()，这与您使用 所做的完全相同.css()，但在我看来更具可读性。
编辑:
正如 Venu 在他的回答中指出的，如果您单击黑色区域，内容也会显示，而不仅仅是“显示内容”文本。解决这个问题的最简单方法是将 id="b1"属性从带有类内容的 div 中移动，并将其放在 a 元素上。
查看我更新的 fiddle :http://jsfiddle.net/jTgRF/65/
关于javascript - 为什么我不能使用 jQuery 隐藏点击元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11178121/