Question

在这个程序中，当鼠标移动到其他项目时，子菜单项不会隐藏，我想在鼠标从他们的区域移动时隐藏子菜单项。你能帮帮我吗？。我真的想要一个点击下拉菜单。

    #main li{
        list-style-type: none;
        display: none;
        text-decoration: none;
    }
    #main{
        cursor: pointer;
        
    }
    #pappaya {
        background-color:#339933;
         text-decoration: none;
    }
     #pappayas {
            background-color:#339933;
          text-decoration: none;
        }
    .orang{
        text-decoration: none;
    }
    #pappaya li{
        text-decoration: none;
    }

 <html>
        <head>
            <link rel="stylesheet" type="text/css" href="mango.css">
            <script>
                 function mangoGrape(selector){
                document.querySelectorAll(selector)
                    .forEach(function(node){
                        node.style.display="block";
                    })
                 }
            </script>
        </head>
        <body>
        </body>
        <ul id="main" onclick="mangoGrape('.apple')">main1
            <div id="pappaya">
            <li class="apple"> <a href="#">sub1</a></li>
             <li class="apple"><a href="#">sub2</a></li>
             <li class="apple"><a href="#">sub3</a></li>
            </div>
        </ul>
         <ul id="main" onclick="mangoGrape('.orang')">main2
            <div id="pappayas">
             <a href="#"><li class="orang">sub21</li></a>
             <a href="#"><li class="orang">sub22</li></a>
             <a href="#"><li class="orang">sub23</li></a>
            </div>
        </ul>
    </html>

在这个程序中，当鼠标移动到其他项目时，子菜单项不会隐藏，我想在鼠标移动到其区域时隐藏子菜单项。与此代码相关的另一个问题是文本修饰属性是不正常。

Answer 1

你忘了隐藏另一个项目：

＆＃13;

/*Do not show li when page showed/ li { display: none; }*/


#main li{
    list-style-type: none;
    display: none;
    text-decoration: none;
}
#main{
    cursor: pointer;

}
#pappaya {
    background-color:#339933;
     text-decoration: none;
}
 #pappayas {
        background-color:#339933;
      text-decoration: none;
    }
.orang{
    text-decoration: none;
}
#pappaya li{
    text-decoration: none;
}

＆＃13;

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
            function mangoGrape(selector){
                 // hide all lis first
                 document.querySelectorAll('li')
                    .forEach(function(node){
                        node.style.display="none";
                    })
                // then show what you want
                document.querySelectorAll(selector)
                    .forEach(function(node){
                        node.style.display="block";
                    })
             }
        </script>
    </head>
    <body>
      <ul id="main" onclick="mangoGrape('.apple')">main1
          <div id="pappaya">
          <li class="apple"> <a href="#">sub1</a></li>
           <li class="apple"><a href="#">sub2</a></li>
           <li class="apple"><a href="#">sub3</a></li>
          </div>
      </ul>
       <ul id="main" onclick="mangoGrape('.orang')">main2
          <div id="pappayas">
           <a href="#"><li class="orang">sub21</li></a>
           <a href="#"><li class="orang">sub22</li></a>
           <a href="#"><li class="orang">sub23</li></a>
          </div>
      </ul>
    </body>
</html>

＆＃13;

Answer 2

当鼠标指针移出元素或从其中一个子元素移出时，会发生onmouseout事件。

＆＃13;

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mango.css">
        <script>
             function mangoGrape(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="block";
                })
             }
            function hide(selector){
            document.querySelectorAll(selector)
                .forEach(function(node){
                    node.style.display="none";
                })
             }
        </script>
    </head>
    <body>
    </body>
    <ul id="main" onmouseout="hide('#pappaya')" onclick="mangoGrape('.apple')">main1
        <div id="pappaya">
        <li class="apple"> <a href="#">sub1</a></li>
         <li class="apple"><a href="#">sub2</a></li>
         <li class="apple"><a href="#">sub3</a></li>
        </div>
    </ul>
     <ul id="main" onmouseout="hide('#pappayas')" onclick="mangoGrape('.orang')">main2
        <div id="pappayas">
         <a href="#"><li class="orang">sub21</li></a>
         <a href="#"><li class="orang">sub22</li></a>
         <a href="#"><li class="orang">sub23</li></a>
        </div>
    </ul>
</html>

＆＃13;

当鼠标从当前项移动时如何隐藏列表项？

2 个答案: