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

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

工作sn-p：

$(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 建议的那样，将点击事件绑定到锚标记而不是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>

Answer 2

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

Answer 3

您需要使用this，即当前元素上下文中的目标元素。我建议您将点击处理程序绑定到 sub_menu 直属子 anchor 元素

$(".sub_menu > a").on('click', function(e) {
    e.preventDefault();
    $(this).closest('.sub_menu').find(".sub").toggle();
});

$(document).ready(function() {
    $(".sub_menu > a").on('click', function(e) {
        e.preventDefault();
        $(this).closest('.sub_menu').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>

Answer 4

在 jQuery 选择器中设置 context 参数。

$(document).ready(function(){    
    $(".sub_menu").click(function(){
        $(".sub", this).toggle();
        // --------^------- here
    });    
});

$(document).ready(function() {
  $(".sub_menu").click(function() {
    $(".sub", this).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>

---

仅供参考：根据您的代码，当您在 ul 内单击时，它会触发该事件。为避免这种情况，您需要防止事件冒泡或将单击事件处理程序绑定到 a 标记，如 @Satpal 建议的那样。

通过使用event.stopPropagation() 防止事件冒泡：

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

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

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