jquery - 向下滑动和向上滑动切换

Question

我正在尝试构建一个包含四个标题的下拉菜单。单击标题后，其列表必须向下滑动并再次单击后向上滑动。我只能对所有列表执行此操作，我的意思是一旦我同时单击所有列表幻灯片的任何标题。您能否帮助使属于标题的每个列表在单击后显示。谢谢。

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

你需要找到被点击的li里面的li。此外，您可能希望为此目的使用 slideToggle:

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

演示:

https://jsfiddle.net/q2gzamg6/

附言。您需要在此处处理您的 css 样式定义。