2

我想让一个 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"
        });
    });
});

演示：http: //jsfiddle.net/jTgRF/41/

4

4 回答 4

4

问题是您没有阻止事件传播。

当您单击按钮时，它实际上首先隐藏了元素，但事件传播到父元素，您在该元素处捕获单击并再次显示它。它运行得如此之快，看起来好像什么都没有发生，但实际上，当您单击 时#b2，元素会被隐藏，然后事件会冒泡到 parent #b1，您已将单击事件侦听器附加到其上以显示内容。

因此，您需要使用.stopPropagation()on #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()and .hide()，这与您使用的完全相同.css()，但在我看来更具可读性。

编辑：

正如 Venu 在他的回答中指出的那样，如果您点击黑色区域，内容也会显示，而不仅仅是“显示内容”文本。解决这个问题的最简单方法是从divwith 类内容中移动 id="b1" 属性并将其放在a-element 上。

查看我更新的小提琴：http: //jsfiddle.net/jTgRF/65/

于 2012-06-24T14:19:01.350 回答
2

因为，您正在为 dom 中不可用的元素附加事件，所以事件不会附加到元素。使用现场 

$('#b2').live('click', function(){

               $('.content').css({"display":"none"});
        });

为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

编辑
1）使用 on 而不是 live 因为 Live 已被弃用。

2）您的CSS还有一个问题。您已将框类的高度设置为 150 像素。所以如果你也点击黑色区域，事件就会被触发。

因此，将 b2 元素移到 b1 之外，这也将解决事件传播到父元素的问题。

于 2012-06-24T14:11:40.403 回答
1

您需要将按钮单击处理程序更改为

$('#b2').click(function(e){
           e.stopPropagation();
           $('.content').css({"display":"none"});
    });

您需要添加event.stopPropagation()或者单击事件将传播到父级div并.content立即再次隐藏。

演示：http: //jsfiddle.net/joycse06/jTgRF/56/

您应该使用 jQuery.show()并.hide()显示/隐藏元素。

于 2012-06-24T14:19:04.457 回答
1

Venu 的 anwser 有效，但 live() 已弃用。

您应该使用 on() 代替：

未来元素的 jQuery .on 函数，因为 .live 已被弃用

代码

$(document).ready(function(){
    $('#b1').click(function(){
        $('.content').css({"display":"block"});
    });

    $(document).on('click', '#b2', function(){
        $('.content').css({"display":"none"});
    });
});

希望这可以帮助

于 2012-06-24T14:20:30.800 回答