Question

我想制作一个响应式导航内容，
当我将鼠标悬停在“ 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>

代码部分起作用，但是当我将1级标题拖出时，它就被折叠了。我希望它一直显示直到我留下其字幕。

Answer 1

您不需要任何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>

折叠父节点，直到将其子节点鼠标移出

1 个答案: