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

如果项目已经else

，您的jquery中需要active来捕获点击

＆＃13;

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

＆＃13;

#nav li ul {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

没有用，因为它没有在已经拥有active类的链接上运行任何代码。

您可以使用更少的代码实现您想要的效果。

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

Fiddle

jQuery简单垂直手风琴菜单

2 个答案: