Question

我尝试使用ul和li创建一个下拉菜单。我的实际问题是，当我点击字母＆＃34; A＆＃34;时，它会打开菜单＆＃34; A＆＃34;菜单＆＃34; B＆＃34;同时，当我点击字母B时会出现同样的问题。

这是我的代码：

HTML 的

<ul class="nav">
  <li>
    <a class="clickto">A </a>
  </li>
  <li class="show" style="display: none;">
    <a href="#">AAA </a>
  </li>
  <li class="show" style="display: none;">
    <a href="#">AAA </a>
  </li>
</ul>
<ul class="nav">
  <li>
    <a class="clickto">B </a>
  </li>
  <li class="show" style="display: none;">
    <a href="#">BBB </a>
  </li>
  <li class="show" style="display: none;">
    <a href="#">BBBB </a>
  </li>
</ul>

的jQuery

$(".clickto").click(function(){
  if ($(this).hasClass("clicked")){
    $(".show").slideUp(500);
    $(this).removeClass("clicked")
  }else{
    $(".show").slideDown(500);
    $(this).addClass("clicked");
  }
});

这里是fiddle

Answer 1

您的问题是$('.show')会匹配页面上show类的所有元素 - 这意味着两个菜单。

您可以通过使用更具体的选择器来解决此问题，该选择器会找到最接近的nav类，然后在其中找到show类。

$(".clickto").click(function() {
  var $show = $(this).closest('.nav').find('.show');
  if ($(this).hasClass("clicked")) {
    $show.slideUp(500);
    $(this).removeClass("clicked")
  } else{
    $show.slideDown(500);
    $(this).addClass("clicked");
  }
});

JSFiddle：https://jsfiddle.net/9cauyora/

使用jQuery的垂直下拉菜单

1 个答案: