jquery - 如何一次只隐藏/显示一个子菜单？

Question

我创建了一个 ul 菜单，当我点击 list 时，子菜单将显示/隐藏。我的问题是我有 2 个子菜单。当我点击其中一个时，另一个子菜单也会受到影响。如何只隐藏/显示对应的子菜单？

$(document).ready(function() {
  $(".sub_menu").click(function() {
    $(".sub").toggle();
  });
});

.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>

Answer 1

像这样使用 $(this) 和 find():

$(this).find(".sub").toggle();

工作片段:

$(document).ready(function() {
   $(".sub_menu").click(function() {
     $(this).find(".sub").toggle();
   });
 });

.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>

是的，正如@Satpal 所建议的，将点击事件绑定(bind)到 anchor 标记而不是 li 元素是一种更好的方法，否则您的点击将贯穿整个下拉列表。我认为您不想要。

在这种情况下，我的解决方案是使用 $(this) 和 next():

$(".sub_menu > a").click(function(e) {
  e.preventDefault();
  $(this).next('.sub').toggle();
});

$(document).ready(function() {
  $(".sub_menu > a").click(function(e) {
    e.preventDefault();
    $(this).next('.sub').toggle();
  });
});

.sub {
  margin: 0px;
}
.sub_menu {
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a>
  </li>
  <li class="sub_menu"><a href="#">Portfolio</a>
    <ul class="sub">
      <li><a href="#">1</a> 
      </li>
      <li><a href="#">2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Blog</a>
  </li>
  <li><a href="#">Pages</a>
  </li>
  <li><a href="#">Shop</a> 
  </li>
  <li class="sub_menu"><a href="#">components</a>
    <ul class="sub">
      <li><a href="#">3</a> 
      </li>
      <li><a href="#">4</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a>
  </li>
</ul>