主页 / 问题 / 964273
Accepted
Павел Рыбакин
Asked:2020-04-02 02:47:14 +0000 UTC2020-04-02 02:47:14 +0000 UTC

单击另一个嵌套列表时自动隐藏嵌套列表

  • 772

当点击一个列表项打开一个嵌套列表时有一个菜单，你需要让它在你点击另一个嵌套列表时，我们打开的最后一个嵌套列表自己关闭。假设我点击“原始采集者和猎人”，然后点击“原始农牧民”，然后“原始采集者和猎人”自动隐藏。另外，如何使列表在悬停时展开？

$(document).ready(function() {
  $("#menuCnt > ul > li > a").click(function() {
    $(this).find("~ ul").stop().slideToggle("slov");
  });
});
#menuCnt ul li {
  list-style: none;
  border-bottom: 1px solid #eaeaea;
  border-radius: 10px;
  }
  #menuCnt ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
  border-radius: 10px;
}
#menuCnt > ul > li > ul {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuCnt">
 
  <ul>
    <li><a href="#" class="textbold">Первобытные собиратели и охотники</a>
      <ul>
        <li><a href="#">Древнейшие люди</a></li>
        <li><a href="#">Родовые общины охотников и собирателей</a></li>
        <li><a href="#"> Возникновение искусства и религиозных верований</a></li>
      </ul>
    </li>
    <li><a href="#" class="textbold">Первобытные земледельцы и скотоводы</a>
      <ul>
        <li><a href="#">Возникновение земледелия и скотоводства</a></li>
        <li><a href="#">Появление неравенства и знати</a></li>
      </ul>
    </li>
    <li>
      <a href="#"> Счет лет в истории</a>
    </li>
  </ul>
  </div>

jquery

1 个回答

  1. Best Answer

    第一的：

    $(document).ready(function() {
  $("#menuCnt > ul > li > a").click(function() {
    $("#menuCnt > ul > li > ul").stop().slideUp("slow");
    $(this).find("~ ul").stop().slideToggle("slow");
  });
});
    #menuCnt ul li {
  list-style: none;
  border-bottom: 1px solid #eaeaea;
  border-radius: 10px;
  }
  #menuCnt ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
  border-radius: 10px;
}
#menuCnt > ul > li > ul {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuCnt">
 
  <ul>
    <li><a href="#" class="textbold">Первобытные собиратели и охотники</a>
      <ul>
        <li><a href="#">Древнейшие люди</a></li>
        <li><a href="#">Родовые общины охотников и собирателей</a></li>
        <li><a href="#"> Возникновение искусства и религиозных верований</a></li>
      </ul>
    </li>
    <li><a href="#" class="textbold">Первобытные земледельцы и скотоводы</a>
      <ul>
        <li><a href="#">Возникновение земледелия и скотоводства</a></li>
        <li><a href="#">Появление неравенства и знати</a></li>
      </ul>
    </li>
    <li>
      <a href="#"> Счет лет в истории</a>
    </li>
  </ul>
  </div>

    第二： 

    $(document).ready(function() {
  $("#menuCnt > ul > li > *").hover(function() {
    $("#menuCnt > ul > li > ul").stop().slideUp("slow");
    $(this).find("~ ul").stop().slideToggle("slow");
  });
});
    #menuCnt ul li {
  list-style: none;
  border-bottom: 1px solid #eaeaea;
  border-radius: 10px;
  }
  #menuCnt ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px;
  border-radius: 10px;
}
#menuCnt > ul > li > ul {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuCnt">
 
  <ul>
    <li><a href="#" class="textbold">Первобытные собиратели и охотники</a>
      <ul>
        <li><a href="#">Древнейшие люди</a></li>
        <li><a href="#">Родовые общины охотников и собирателей</a></li>
        <li><a href="#"> Возникновение искусства и религиозных верований</a></li>
      </ul>
    </li>
    <li><a href="#" class="textbold">Первобытные земледельцы и скотоводы</a>
      <ul>
        <li><a href="#">Возникновение земледелия и скотоводства</a></li>
        <li><a href="#">Появление неравенства и знати</a></li>
      </ul>
    </li>
    <li>
      <a href="#"> Счет лет в истории</a>
    </li>
  </ul>
  </div>

    • 1

相关问题