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

Posted 2023-03-06

技术标签:

【中文标题】鼠标从当前项目移动时如何隐藏列表项目？【英文标题】：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>

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

【问题讨论】：

***.com/questions/10995165/… 您想仅在单击时显示子列表还是在鼠标移到菜单项上时显示。检查这个例子 - w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar 是的，兄弟...我只想在点击时显示子列表。 【参考方案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>

【讨论】：

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

以上是关于鼠标从当前项目移动时如何隐藏列表项目？的主要内容，如果未能解决你的问题，请参考以下文章

jQuery UI Sortable：使用新位置更新每个项目的隐藏输入值