Question

我试图在点击链接时显示＃subscribe-pop div，并在点击其外的任何位置时隐藏它。如果我改变：

，我可以让它显示和隐藏

$('document').click(function() {

要

$('#SomeOtherRandomDiv').click(function() {

HTML：

<div id="footleft">
    <a href="#" onclick="toggle_visibility('subscribe-pop');">Click here to show div</a>
    <div id="subscribe-pop"><p>my content</p></div>
</div>

脚本：

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById("subscribe-pop");
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
        }
    }

    $('document').click(function() {
        $('#subscribe-pop').hide(); //Hide the menus if visible
    });

    $('#subscribe-pop').click(function(e){
        e.stopPropagation();
    });
</script>

Answer 1

您必须停止容器中的事件传播（在这种情况下，＆＃39; footleft＆＃39;），因此父元素不会注意到事件已被触发。

这样的事情：

<强> HTML

 <div id="footleft">
    <a href="#" id='link'>Click here to show div</a>
    <div id="subscribe-pop"><p>my content</p></div>
 </div>

<强> JS

 $('html').click(function() {
    $('#subscribe-pop').hide();
 })

 $('#footleft').click(function(e){
     e.stopPropagation();
 });

 $('#link').click(function(e) {
     $('#subscribe-pop').toggle();
 });

看到它正常工作here。

Answer 2

我认为提问者正试图完成一个jquery模式类型的div显示。

如果您要查看此link，则加载页面会显示一个模态div，可以将您的眼睛拉到屏幕中央，因为它会使背景变暗。

此外，我编制了一个简短的jsFiddle供您查阅。如果您被允许使用jquery满足您的要求，您也可以查看他们的网站。

以下是显示或隐藏弹出式div

的代码

var toggleVisibility = function (){
     if($('#subscribe-pop').is(":not(:visible)") ){
            $('#subscribe-pop').show(); 
        }else{
             $('#subscribe-pop').hide(); 
        }   
    }

Answer 3

将$(document).click()更改为$('html').click()可以解决主要问题。

其次，您根本不需要toggle_visibility()功能，您可以这样做：

$('#subscribe-pop').toggle();

参考：根据此回答将body更改为html：How do I detect a click outside an element?

单击外部时单击并隐藏显示div

3 个答案: