jQuery的簡單的垂直摺疊式菜單

Question

如何當我點擊「項目」，它會打開，當再次點擊它會在垂直摺疊式菜單關閉 我可以做的：

<style> 
    #nav { float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; } #nav li a { display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000; } #nav li a:hover, #nav li a.active { background: #999; color: #fff; } #nav li ul { display: none; // used to hide sub-menus } #nav li ul li a { padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc; } 
    </style> 

    <ul id="nav"> 
     <li><a href="#">Item 1</a> 
     <ul> 
      <li><a href="#">Sub-Item 1 a</a></li> 
      <li><a href="#">Sub-Item 1 b</a></li> 
      <li><a href="#">Sub-Item 1 c</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Item 2</a> 
     <ul> 
      <li><a href="#">Sub-Item 2 a</a></li> 
      <li><a href="#">Sub-Item 2 b</a></li> 
     </ul> 
     </li> 
    </ul> 


<script type="text/javascript"> 
$(document).ready(function() { 
    $('#nav > li > a').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
     $('#nav li ul').slideUp(); 
     $(this).next().slideToggle(); 
     $('#nav li a').removeClass('active'); 
     $(this).addClass('active'); 
    } 
    }); 
}); 
</script> 

當我點擊第1項，第2項之會打開子菜單，但如果我再次點擊它並沒有關閉它。

Answer 1

你在你的jQuery需要一個else搭上點擊，如果該項目已經爲active

$(document).ready(function() { 
 
    $('#nav > li > a').click(function(){ 
 
    if ($(this).attr('class') != 'active'){ 
 
     $('#nav li ul').slideUp(); 
 
     $(this).next().slideToggle(); 
 
     $('#nav li a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    } else { 
 
     $('#nav li ul').slideUp(); 
 
     $('#nav li a').removeClass('active'); 
 
    } 
 
    }); 
 
});

#nav li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="nav"> 
 
     <li><a href="#">Item 1</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 1 a</a></li> 
 
      <li><a href="#">Sub-Item 1 b</a></li> 
 
      <li><a href="#">Sub-Item 1 c</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 2</a> 
 
     <ul> 
 
      <li><a href="#">Sub-Item 2 a</a></li> 
 
      <li><a href="#">Sub-Item 2 b</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul>

Answer 2

沒有工作，因爲它沒有鏈接上運行任何代碼，已經有active類。

你可以用較少的代碼實現你想要的。

$('#nav > li > a').click(function(){ 
    $('#nav > li > a').not(this).removeClass('active').next().slideUp(); 
    $(this).toggleClass('active').next().slideToggle(); 
}); 

Fiddle