Question

我想让一个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/

Answer 1

问题在于您不会阻止事件传播。

当您单击按钮时，它实际上会首先隐藏元素，但事件会传播到父元素，在该元素处捕获单击并再次显示它。它看起来似乎没有发生任何事情，但实际上当你点击#b2时，元素会被隐藏，然后事件会冒泡到父#b1，你已经附加了点击事件听众展示内容。

因此，您需要在#b2上使用.stopPropagation()。

$(document).ready(function(){
     $('#b1').click(function(){
           $('.content').show();
    });

    $('#b2').on("click", function(e){ 
           $('.content').hide();
            e.stopPropagation();
    });
});

您需要做的是将click事件传递给回调函数（在我的示例中声明为e），然后在其上调用stopPropagation()以确保它不会冒泡到父元素。

以下是一个工作示例：http://jsfiddle.net/jTgRF/64/

注意我使用.show()和.hide()，这与您对.css()的操作完全相同，但在我看来更具可读性。< / p>

修改

正如Venu在他的回答中所指出的那样，如果你点击黑色区域，内容也将显示，而不仅仅是“显示内容” - 文本。最简单的解决方法是从div移动带有类内容的id =“b1”属性，并将其放在a - 元素上。

请参阅我的更新小提琴：http://jsfiddle.net/jTgRF/65/

Answer 2

因为，您附加了dom中不可用的元素的事件，事件不会附加到元素。使用live

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

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

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

修改
1）使用on而不是live，因为Live已被弃用。

2）你的css还有一个问题。您已将箱子类的高度设置为150px。因此，如果您同时点击黑色区域，则会触发事件。

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

Answer 3

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

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

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

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

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

Answer 4

金星回答有效，但不推荐使用live（）。

你应该使用on（）代替：

jQuery .on function for future elements, as .live is deprecated

<强>代码

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

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

希望这有帮助

为什么我不能使用jQuery隐藏单击元素？

4 个答案: