嵌套列表切换可见性和：悬停效果
我正在尝试创建一个包含菜单项的导航部分，您可以单击该菜单项来查看其他菜单项的列表，然后您可以点击进行导航。 到目前为止，我已经尝试使用<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列表作为一个纺织机械展览会，这意味着:hover效果适用于所有，而不是对每个单独的项目。
有没有一种方法可以A）切换嵌套列表以显示和隐藏点击Directories <li>项目和B）分别对待嵌套列表，以便将:hover效果独立应用于父列表和嵌套列表。
您可以使用，
$("p").click(function() {
$(this).closest("li").find("ul").slideToggle();
});
closest()会让你父母李
然后使用find("ul")遍历子ul
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>