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在元素外面隱藏元素

回答

相關問題