时间戳

首页 > 解决方案 > 折叠父节点直到鼠标移出其子节点

javascript - 折叠父节点直到鼠标移出其子节点

问题描述

我想做一个响应式导航内容，
当我将鼠标悬停在“level-1”标题上时，它会展开它的子标题，
而当鼠标移出子标题时，它会将它们全部折叠起来。

<html>
<head>
<style></style>
</head>
<body>
<ul>
<li class="level-1"> <a href="">HTML</a>
    <ul> <li> <a href="">1.Abstract Sections</a>
             <ul>
                <li> <a href="">1.Header</a> </li>
                <li> <a href="">2.Footer</a> </li>
                <li> <a href="">3.A.Main</a> </li>
                <li> <a href="">4.B1.Nav</a> </li>
                <li> <a href="">5.B2.Aside</a> </li>
            </ul>
        </li>
        <li> <a href="">2.Block</a>
            <ul> <li> <a href="">Headers</a> </li>
                <li> <a href="">Paragraphs</a> </li>
                <li> <a href="">List</a> </li>
                <li> <a href="">Table</a> </li>
                <li> <a href="">Quotation</a> </li>
            </ul>
        </li>
    </ul>
</li><!-- html -->
<li class="level-1"> <a href="">CSS</a>
    <ul> <li><a href="">Boxes</a>
            <ul>
                <li> <a href="">Margin</a> </li>
                <li> <a href="">Padding</a> </li>
                <li> <a href="">Border</a> </li>
            </ul>
        </li>
        <li><a href="">Layout</a></li>
        <li><a href="">Text</a></li>
    </ul>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
$(document).ready(function(e){
    $("body>ul>li>ul").hide();
    $("body>ul>li>a").on("mouseover",function(e){
        e.preventDefault();
        // alert("clicked");
        $(e.target).next().show();
    });
    $("body>ul>li").on("mouseout",function(e){
        e.preventDefault();
        // alert("clicked");
        $(e.target).next().hide();
    });

})

</script>
</body>
</html>

代码部分有效，但是当我将一级标题鼠标移出时，它被折叠了。我希望它一直展开，直到我离开它的副标题。

标签： javascriptjquery

解决方案

您不需要任何 JS，因为它可以通过使用 CSS选择器根据用户悬停的元素:hover隐藏/显示相关元素来更简单有效地完成：li

ul > li > ul { 
  display: none; 
}

ul > li:hover > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class="level-1">
    <a href="">HTML</a>
    <ul>
      <li>
        <a href="">1.Abstract Sections</a>
        <ul>
          <li> <a href="">1.Header</a> </li>
          <li> <a href="">2.Footer</a> </li>
          <li> <a href="">3.A.Main</a> </li>
          <li> <a href="">4.B1.Nav</a> </li>
          <li> <a href="">5.B2.Aside</a> </li>
        </ul>
      </li>
      <li>
        <a href="">2.Block</a>
        <ul>
          <li> <a href="">Headers</a> </li>
          <li> <a href="">Paragraphs</a> </li>
          <li> <a href="">List</a> </li>
          <li> <a href="">Table</a> </li>
          <li> <a href="">Quotation</a> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="level-1">
    <a href="">CSS</a>
    <ul>
      <li>
        <a href="">Boxes</a>
        <ul>
          <li> <a href="">Margin</a> </li>
          <li> <a href="">Padding</a> </li>
          <li> <a href="">Border</a> </li>
        </ul>
      </li>
      <li><a href="">Layout</a></li>
      <li><a href="">Text</a></li>
    </ul>
  </li>
</ul>

推荐阅读