向下滑动并向上滑动切换

Question

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

HTML

var can = document.getElementById('canvas1');

var ctx = can.getContext("2d");
var context = can.getContext('2d');

var given;
var current;

var percentage = .5; 
var degrees = percentage * 360;
var radians = degrees * (Math.PI / 180);

var x = 50;
var y = 50;
var r = 30;
var s = 1.5 * Math.PI;

ctx.beginPath();
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.stroke();



context.beginPath();
context.lineWidth = 10;

context.arc(x, y, r, s, radians+s, false);
context.stroke();

CSS

<canvas id="canvas1" width="100" height="100"></canvas>

JQuery的

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

Answer 1

您需要在点击的li中找到li。此外，您可能希望slideToggle用于此目的：

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

演示：

https://jsfiddle.net/q2gzamg6/

PS。你需要在这里处理你的css样式定义。

Answer 2

使用这种方式：

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

<强>段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;