单击一次显示div，单击外部时隐藏

I'm trying to show the #subscribe-pop div once a link is clicked and hide it when clicking anywhere outside it. I can get it to show and hide if I change the:

当一个链接被点击时，我试图显示#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:

脚本:

<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>

3 个解决方案

#1

You have to stop the event propagation in your container ('footleft' in this case), so the parent element don't notice the event was triggered.

您必须停止容器中的事件传播(在本例中为'footleft')，因此父元素不会注意到事件被触发。

Something like this:

是这样的:

HTML

HTML

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

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

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

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

See it working here.

看到它在这里工作。

#2

I reckon that the asker is trying to accomplish a jquery modal type of display of a div.

我认为asker正在尝试完成一个div的jquery模态显示类型。

Should you like to check this link out, the page upon load displays a modal div that drives your eye into the center of the screen because it dims the background.

如果你想要查看这个链接，加载的页面会显示一个模态div，它会让你的眼睛进入屏幕的中心，因为它会使背景变暗。

Moreover, I compiled a short jsFiddle for you to check on. if you are allowed to use jquery with your requirements, you can also check out their site.

此外，我还为您编写了一个简短的jsFiddle供您查看。如果允许您在需求中使用jquery，您也可以查看他们的站点。

Here is the code for showing or hiding your pop-up div

下面是显示或隐藏弹出div的代码。

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

#3

-1

Changing $(document).click() to $('html').click() should solve the main problem.

更改$(document).click()到$('html').click()应解决主要问题。

Secondly, you do not need the toggle_visibility() function at all, you can simply do:

其次，您根本不需要toggle_visibility()函数，您可以这样做:

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

Ref: changed body to html as per this answer: How do I detect a click outside an element?

Ref:根据以下答案将body更改为html:如何检测元素外的单击?

#1