Question

我目前有一个子UL列表。单击列表项时，我希望UL滑动切换。这个我已经实现了。我目前遇到的问题是，如果我点击我打开的相同项目来关闭它，它会执行双切换。值得一提的是，我希望一次只打开一个子ul。

HTML

<div class="top">
 <ul>
  <li><a href="#"> Item </a></li>
<li class="drop"><a href="#"> Item Drop </a>
  <ul class="sub">
    <li><a href="#"> Sub Item </a></li>
    <li><a href="#"> Sub Item </a></li>
    <li><a href="#"> Sub Item </a></li>
  </ul>
</li>
<li><a href="#"> Item </a></li>
<li><a href="#"> Item </a></li>
<li class="drop"><a href="#"> Item Drop</a>
  <ul class="sub">>
    <li><a href="#"> Sub Item </a></li>
    <li><a href="#"> Sub Item </a></li>
    <li><a href="#"> Sub Item </a></li>
  </ul>
</li>
</ul>
</div>

CSS

ul {
  li {
    ul {
      display:none;
    }
  }
}

JS

$('.drop').click(function(){
  $('.sub').slideUp();
  $(this).children('.sub').slideToggle();
});

http://codepen.io/anon/pen/RRZPvZ

Answer 1

尝试以下

$('.drop').click(function(e){
  if($(e.target).closest('ul').is(':not(.sub)')) {//if the clicked element is has a ul that is not .sub we slide them up
  $('.sub').slideUp();}
  $(this).children('.sub').slideToggle();
});

或：

$('.drop').click(function(e){
  $('.sub').not( $(this).children('.sub')).slideUp();//hide all except the one we want to display
  $(this).children('.sub').slideToggle();
});

如何防止同一项目上的多个滑动眼镜

1 个答案: