Question

我正在使用jQuery的toggle()函数来创建一个下拉菜单，但我会在这个项目中添加许多子菜单。

我需要点击a.sub_open切换div.submenu。

JS代码：

$(document).ready(function(){
    $( ".sub_open" ).click(function() {
        $(".sub_menu").next.toggle("blind", 0, 500);
    });
});

有什么建议吗？

EDIT1：

我尝试使用next()，但问题仍然存在。你能建议一种方法来实现这个目标吗？

Answer 1

next是一个函数，但您已将其用作字段或属性。也可以通过$(this)

进行调用

$(document).ready(function(){
    $( ".sub_open" ).click(function() {
         $(this).next().toggle("blind", 0, 500);
    });
});

Answer 2

使用this和next()，如下所示： -

$(document).ready(function(){
  $( ".sub_open" ).click(function() {
    $(this).next(".sub_menu").toggle("blind", 0, 500);
  });
});

.sub_menu{
  background:#232323;
  color:#fff;
  height:200px;
  width:200px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li>
      <a class="sub_open">aaa</a>
      <div class="sub_menu"><p>text the sub_menu</p></div>
    </li>

    <li><a href="">bbb</a></li>
    <li>
      <a class="sub_open">ccc</a>
      <div class="sub_menu"><p>text the sub_menu</p></div>
    </li>
    <li><a href="">ddd</a></li>
    <li><a href="">eee</a></li>
  </ul>
</div>

工作小提琴： - https://jsfiddle.net/xhtw28wb/

注意： - 确保在脚本代码之前添加了jQuery库。

Answer 3

.next()是一个可链接的函数，使用它如下：

$(".sub_menu").next().toggle("blind", 0, 500);

.next（）不适用于.toggle（）

EDIT1：

3 个答案: