Question

我在jquery show和hide方面遇到了一个小问题。

我有一个按钮可以激活点击并显示一个框。

是否可以在框外单击以淡出框

这是我的代码。

$('.normal-btn.interest').click(function(){
    $('.categories-wrap').fadeIn();
})

$('what needs to be here? ').click(function(){
    $('.categories-wrap').fadeOut();
})

Answer 1

是的，您可以将click事件绑定到document，例如：

$('.normal-btn.interest').click(function(e){

    // Prevent the event from bubbling up the DOM tree
    e.stopPropagation();
    $('.categories-wrap').fadeIn();
});

$(document).click(function(){
    $('.categories-wrap').fadeOut();
});

Answer 2

试试这个：

$('.normal-btn.interest').click(function(e){
      e.stopPropagation();
     $('.categories-wrap').fadeIn();
});

$(document).not($(".normal-btn.interest")).click(function(){
    $('.categories-wrap').fadeOut();
});

Answer 3

我确实喜欢这个

<pre>
<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
    $("p").toggle();

    var x = $("#hide").text();

    if(x=="Hide"){
    $("button").html("show");

    }
    else 
    {
    $("button").html("Hide");

    }

 });

});

</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>



</body>
</html>

它可以尝试

jquery显示和隐藏按钮

3 个答案: