關閉點擊外部元素 - 我在這裏做錯了什麼？

只是做了一個快速測試，點擊jquery元素外部，但有一些問題。關閉點擊外部元素 - 我在這裏做錯了什麼？

我試圖刪除單擊外部元素的類。

問題似乎是'文檔'處理程序與跨度同時激活，因此無法正常工作。

我需要它，所以它在類已經被添加後有效。

乾杯

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>animation</title> 
 
     <link rel="stylesheet" href="css/normalize.css" media="screen" title="no title"> 
 
     <link rel="stylesheet" href="css/main.css" media="screen" title="no title"> 
 
    </head> 
 
    <body> 
 
     <ul> 
 
      <li class="top-list"><span>Item</span> 
 
       <ul class="sub-top"> 
 
        <li class="sub-list">Item 1</li> 
 
        <li class="sub-list">Item 2</li> 
 
        <li class="sub-list">Item 3</li> 
 
        <li class="sub-list">Item 4</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
     <script type="text/javascript"> 
 
      $("span").on("click", function(){ 
 
       $(".sub-list").toggleClass("show-menu"); 
 
      }); 
 
    
 
      $(document).on('click', function(event) { 
 
       if (!$(event.target).closest('.sub-list').length) { 
 
        $(".sub-list").removeClass("show-menu"); 
 
       } 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-09-04 Joe Consterdine

.sub-list或.sub-top？看起來應該是次頂 –

你錯過ev.stopPropagation()的第一個處理程序。你點擊span切換類show-menu，然後事件冒泡到文檔，因此您單擊的.sub-list出（跨度出來的）第二處理刪除類

還是在第二個處理器，你需要檢查是否元素上單擊出來的.sub-list而不是span元素

ul[class]:not(.show-menu) { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>animation</title> 
 
    <link rel="stylesheet" href="css/normalize.css" media="screen" title="no title"> 
 
    <link rel="stylesheet" href="css/main.css" media="screen" title="no title"> 
 
</head> 
 
<body> 
 
    <ul> 
 
     <li class="top-list"><span>Item</span> 
 
      <ul class="sub-top"> 
 
       <li class="sub-list">Item 1</li> 
 
       <li class="sub-list">Item 2</li> 
 
       <li class="sub-list">Item 3</li> 
 
       <li class="sub-list">Item 4</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
    <script type="text/javascript"> 
 
     $("span").on("click", function(ev){ 
 
      $(".sub-top").toggleClass("show-menu"); 
 
      ev.stopPropagation(); 
 
     }); 
 

 
     $(document).on('click', function(event) { 
 
      if (!$(event.target).closest('.sub-list').length) { 
 
       $(".sub-top").removeClass("show-menu"); 
 
      } 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

約起泡的信息可以在這裏找到http://javascript.info/tutorial/bubbling-and-capturing

來源

2016-09-04 13:26:02

謝謝，這工作得很好。我只是將.sub-top類更改回.sub-list，因爲這是基於我的CSS所必需的。事件如何冒泡停止傳播？你能解釋一下究竟發生了什麼？再次感謝！ –

@JoeConsterdine查看下一篇文章http://javascript.info/tutorial/bubbling-and-puring –

非常感謝。 –

我認爲這是一個泡沫問題，用span元素取消泡泡。試試！

來源

2016-09-04 13:31:00

關閉點擊外部元素 - 我在這裏做錯了什麼？

回答

相關問題