滑动切换和滑动收起切换

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);
});

- egurb

Answer 1

你需要找到被点击的li里面的li。另外，你可能想要使用slideToggle来实现这个目的：

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

演示： https://jsfiddle.net/q2gzamg6/ PS. 这里需要改进你的CSS样式定义。

- n-dru

---

非常感谢！完美运作！ :) - egurb

Answer 2

使用这种方式：

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

代码片段

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

- Praveen Kumar Purushothaman

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - egurb