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

【问题标题】：How hide the list items when mouse move from current item?鼠标从当前项目移动时如何隐藏列表项目？
【发布时间】：2016-12-23 21:26:52
【问题描述】：

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

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

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

【问题讨论】：

stackoverflow.com/questions/10995165/…
您想仅在单击时显示子列表还是在鼠标移到菜单项上时显示。
检查这个例子 - w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
是的，兄弟...我只想在点击时显示子列表。

标签： javascript html css

【解决方案1】：

onmouseout 事件在鼠标指针移出元素或其子元素之一时发生。

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

【讨论】：

这很好。但是在使用此代码时我无法选择子菜单项，真的我想要点击下拉菜单

【解决方案2】：

你只是忘记隐藏另一个项目：

/*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;
}

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

【讨论】：

这是一个很好的解决方案，但它总是显示一些子菜单项，即使我们点击外部它也会显示。我想要一个点击下拉菜单。
我不明白你到底想要什么。
我真的想要一个点击下拉菜单。