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

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列表和<ul>列表中的Directories视为一个itme，这意味着应用了:hover效果全部而不是每个单独的项目。

有没有办法可以A）切换嵌套列表以显示和隐藏点击Directories <li>项目和B）单独处理嵌套列表以便{{1}效果独立应用于父列表和嵌套列表。

Answer 1

你可以使用，

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

closest()会为您提供父母

然后使用find("ul")

遍历孩子ul

Answer 2

a）如果你使用jquery，你会得到这个帮助。

＆＃13;

＆＃13;

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

＆＃13;

.sub-menu{
display:none}



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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;