向下滑動並向上滑動切換

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/

PS。你需要在這裏處理你的CSS樣式定義。

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>