jQuery在元素外面隐藏元素

我一直在研究一个非常简单的Jquery脚本，它为用户显示一些迷你仪表板（div）。当有人点击链接时，会显示正确的面板。非常像Twitter的登录面板。jQuery在元素外面隐藏元素

我唯一的问题是，当我点击面板外部时，它会按照预期关闭，但是当我点击面板内部时仍然会关闭。

每个面板里面还有其他的html元素，我想知道他们是否正在阻碍主面板div？

帐户menu.js

(function($){ 
    $.fn.renderDash = function(openDash, fn) { 
     var container = $(this); 
     container.removeClass('no-js'); 

     container.bind('click', function(event){event.preventDefault();clickStart();}) 
       .bind('mouseup', function(event){mouseupDash();}) 

     $(document.body).bind('mouseup', function(event){ // <-- the offending code 
      if ($(openDash).has(this).length == 0) { 
       $(openDash).hide(); 
      } 

     }) 

     function clickStart() {$(openDash).toggle();} 
     function mouseupDash() {return false;} 
    }; 
})(jQuery);

的index.html

... 
<script src="jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="account-menu.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.panel1-start').renderDash("#panel1"); 
     $('.panel2-start').renderDash("#panel2"); 
     $('.panel3-start').renderDash("#panel3"); 
    }); 
</script> 
... 
</head> 

<body> 
... 
<ul> 
    <li> 
     <a href="" class="panel1-start">Panel 1 Link</a> 
     <ul id="panel1"> 
      <li>Panel 1 Content</li> 
     </ul> 
    </li> 
panel2, panel3, etc...

更新：我刚添加的HTML代码片段。可能会让事情更清楚些。

来源

2011-03-12 EddyR

你有没有试过用这个;

container.bind('click', function(event){event.preventDefault();clickStart();}) 
       .bind('mouseup', function(event){event.stopPropagation();mouseupDash();})

它应该停止MouseUp事件行驶到文档正文。

EDIT

an example制造从现在提供的代码。它很脏，但应该给你一个出发点。 .stopPropagation()是正确的，但它被应用于错误的元素。面板显示在第一次加载并点击它们将隐藏它们。但是，一旦你切换它们，.stopPropagation()将被调用，它都应该工作。只在Chrome中使用testde。

来源

2011-03-12 08:42:15 lnrbob

我不知道为什么两个这些答案都被投票了，当他们都没有工作 – EddyR 2011-03-15 15:17:33

可能有人发现这些帮助他们遇到的问题。我已经更新了我的答案，并希望这会为您解决问题！ :) – lnrbob 2011-03-15 22:26:22

啊，这更像它。非常感谢你，jsfiddle网站也很酷。 – EddyR 2011-03-16 03:20:15

在内部元素的点击处理程序中调用event.stopPropagation();。这可以防止外部元素接收点击事件。当然，这同样适用于其他鼠标事件。

来源

2011-03-12 08:43:18 ThiefMaster

它似乎也停止了所有其他相关事件的传播。 – EddyR 2011-03-12 09:03:04

我刚注意到一些有趣的事情......我有3个面板，甚至没有event.stopPropagation（）;只有第二个面板完美地工作！所有3个面板都具有完全相同的内容。这没有道理！ – EddyR 2011-03-13 04:40:05

jQuery在元素外面隐藏元素

回答

相关问题