向下滑动并向上滑动切换

Question

I am trying to build a slide down menu with four headings. Once I click on a heading its list has to slide down and slide back up once clicked again. I could do this only with all the lists, I mean once I click any heading all the list slide at same time. Could you please help to make each list which belongs to heading to appear once clicked. Thanks.

HTML

<nav>
    <ul>
          <li class="menu-block">heading1
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading2
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading3
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading4
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
    </ul>
</nav>

CSS

nav{
    position:fixed;
    right: 0;
    background: #fff;
    color: #000;
    height: 100%;
    width: 100%;
}
nav ul:first-child{
    float: right;
    position: relative;
    height: 100%;
    width:30%;
    background: #fff;
    text-align: center;
}
nav .menu-block li{
    width: 50%;
    height: auto;
    border: 1px solid black;
    font-size: 0.8em;
    text-align: left;
    display: none;
}

JQuery

$(".menu-block").click(function(){
    $(this).find('nav .menu-block li').slideDown(500);
});

Answer 1

You need to find the li s inside the clicked li . Besides, you might want to use slideToggle for this purpose:

$(".menu-block").click(function(){
    $(this).find('li').slideToggle(500);
});

Demo:

https://jsfiddle.net/q2gzamg6/

PS. You need to work on your css style definition here.

Answer 2

Use this way:

$(".menu-block").click(function(){
    $(this).find('ul').slideDown(500);
});

Snippet

 $(function () { $(".menu-block").click(function(){ $(this).find('ul').slideDown(500); }); }); 

 nav{ position:fixed; right: 0; background: #fff; color: #000; height: 100%; width: 100%; } nav ul:first-child{ float: right; position: relative; height: 100%; width:30%; background: #fff; text-align: center; } nav .menu-block li{ width: 50%; height: auto; border: 1px solid black; font-size: 0.8em; text-align: left; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <nav> <ul> <li class="menu-block">heading1 <ul> <li><a href="">item</a></li> <li><a href="">item</a></li> <li><a href="">item</a></li> </ul> </li> <li class="menu-block">heading2 <ul> <li><a href="">item</a></li> <li><a href="">item</a></li> <li><a href="">item</a></li> </ul> </li> <li class="menu-block">heading3 <ul> <li><a href="">item</a></li> <li><a href="">item</a></li> <li><a href="">item</a></li> </ul> </li> <li class="menu-block">heading4 <ul> <li><a href="">item</a></li> <li><a href="">item</a></li> <li><a href="">item</a></li> </ul> </li> </ul> </nav>