嵌套列表可切换可见性和:悬停效果

Question

我正在尝试创建一个包含菜单项的导航部分，您可以单击这些菜单项来查看其他菜单项的列表，然后可以单击这些菜单项进行导航。到目前为止，我已经尝试使用<ul> & <li>，结果如下：

<ul class="list-unstyled">
    <li>
        <a href="#"><img src="images/Home.png" alt="home image"/></a>
        <p>Directories</p>
        <ul class="list-unstyled">
            <li>Test Text 1</li>
            <li>Test Text 2</li>
            <li>Test Text 3</li>
        </ul>
    </li>
    <li>
        <a href="#"><img src="images/Home.png" alt="home image"/></a>
        <p>Contracts</p>
    </li>
    <li>
        <a href="#"><img src="images/Home.png" alt="home image"/></a>
        <p>Processes</p>
    </li>
    <li>
        <a href="#"><img src="images/Home.png" alt="home image"/></a>
        <p>Filing</p>
    </li>
    <li>
        <a href="#"><img src="images/Home.png" alt="home image"/></a>
        <p>My Profile</p>
    </li>
</ul>

​

​

这给我带来了一些问题。首先，我不确定如何编写代码，以便当用户单击Directories时，嵌套在其中的ul是可见的。

此外，这样做的另一个问题是它将Directories列表和Directories列表中的<ul>视为一个项目，这意味着:hover效果将应用于所有项目，而不是每个单独的项目。

有没有一种方法可以A)切换嵌套列表以在单击Directories <li>项时显示和隐藏，以及B)单独处理嵌套列表，以便:hover效果独立地应用于父列表和嵌套列表。

Answer 1

你可以使用，

$("p").click(function() {
  $(this).closest("li").find("ul").slideToggle();
});

closest()将为您提供家长li

然后使用find("ul")遍历子ul

Answer 2

a)如果你使用jquery，这个帮助将会帮助你。

​

$('#toggle').click(function() {
  $('.sub-menu').toggle();
});

.sub-menu{
display:none}



.list-unstyled >li >a:hover{
background:blue;
color:white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
  <li id=toggle>
    <a href="#"><img src="images/Home.png" alt="home image" /></a>
    <p>Directories</p>
    <ul class="sub-menu">
      <li>Test Text 1</li>
      <li>Test Text 2</li>
      <li>Test Text 3</li>
    </ul>
  </li>
  <li>
    <a href="#"><img src="images/Home.png" alt="home image" /></a>
    <p>Contracts</p>
  </li>
  <li>
    <a href="#"><img src="images/Home.png" alt="home image" /></a>
    <p>Processes</p>
  </li>
  <li>
    <a href="#"><img src="images/Home.png" alt="home image" /></a>
    <p>Filing</p>
  </li>
  <li>
    <a href="#"><img src="images/Home.png" alt="home image" /></a>
    <p>My Profile</p>
  </li>
</ul>

​