5

我试图在单击链接后显示#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>
4

3 回答 3

14

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

像这样的东西：

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();
 });

看到它在这里工作。

于 2013-04-24T14:06:34.123 回答
1

我认为提问者正在尝试完成 div 的 jquery 模态类型显示。

如果您想查看此链接，则加载页面时会显示一个模态 div，因为它会使背景变暗，从而将您的眼睛吸引到屏幕中心。

此外，我编译了一个简短的jsFiddle供您查看。如果您被允许根据您的要求使用 jquery，您还可以查看他们的网站。

这是显示或隐藏弹出 div 的代码

var toggleVisibility = function (){
     if($('#subscribe-pop').is(":not(:visible)") ){
            $('#subscribe-pop').show(); 
        }else{
             $('#subscribe-pop').hide(); 
        }   
    }
于 2013-04-24T14:21:38.643 回答
-1

改成$(document).click()应该$('html').click()可以解决主要问题。

其次，您根本不需要该toggle_visibility()功能，您可以简单地执行以下操作：

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

参考：更改body为html根据此答案：如何检测元素外的点击？

于 2013-04-24T13:49:24.917 回答