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

如果項目已經active則需要在jquery中使用else來捕獲點擊

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

小提琴