Nested lists toggle visibility and :hover effects

I am trying to create a section of navigation that contains menu items that you can click to see a list of other menu items which you can then click on to navigate. So far I have tried using <ul> & <li> which has resulted in this:

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

This is creating a few issues for me. Firstly, I am not sure how to code this so that when the user clicks on Directories the ul nested inside is then visible.

Also, another issue with this is that it treats the Directories list and the <ul> inside the Directories list as one itme, meaning that the :hover effect is applied to all instead of to each individual item.

Is there a way I can A) toggle the nested list to show and hide on the click of the Directories <li> item and B) Treat the nested list separately so that the :hover effect is applied independently to both parent list and nested list.

---

You can use,

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

closest() will get you the parent li

Then traverse to the child ul using find("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>

链接地址: http://www.djcxy.com/p/83978.html

上一篇: 使子导航滑动并滑动切换

下一篇: 嵌套列表切换可见性和：悬停效果