关闭元素点击外面-我在这里做错了什么

Closing element on click outside - What am I doing wrong here?

本文关键字：在这里 错了 什么 外面 元素      更新时间：2023-09-26

只是在做一个快速的测试，点击外部的jquery元素，但有一些问题。

我想删除一个类在点击一个元素之外。

问题似乎是'document'处理程序与span同时激活，因此不工作。

我需要它，所以它工作后，类已经添加。

欢呼

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

您错过了ev.stopPropagation()的第一个处理程序。您单击span切换类show-menu，然后事件冒泡到文档中，因此您单击退出.sub-list (span不在其中)第二个处理程序删除类

或者在第二个处理程序中，你需要检查你点击的是.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

我认为这是一个气泡问题，取消气泡与span元素。试试吧!

相关文章：