jquery - 如何将多个 IF 函数与 jQuery 结合起来？

Question

我正在寻找以下代码是否有更有效的方法：谢谢:)

$( ".menu" ).click(function() {
$( ".submenu" ).slideToggle( "fast", function() {
// Animation complete.
});
});

$( ".menu2" ).click(function() {
$( ".submenu2" ).slideToggle( "fast", function() {
// Animation complete.
});
});

$( ".menu3" ).click(function() {
$( ".submenu2" ).slideToggle( "fast", function() {
// Animation complete.
});
});

Answer 1

$.each([1,2,3], function(index) {
  $( ".menu"+index ).click(function() {
    $( ".submenu"+index ).slideToggle( "fast", function() {
    // Animation complete.
    });
  });
}

Answer 2

您可以使用 [Attribute Starts With Selector [name^="value"]] 执行类似的操作，并使用类名来获取submenu类1的公共编号。

$( "[class^=menu]" ).click(function() {
   num = this.className.replace('menu', '')
  $( ".submenu" + num ).slideToggle( "fast", function() {
     // Animation complete.
  });
});

Answer 3

好的，感谢那些发表评论的人，我找到了两种方法来制作更合乎逻辑的 jQuery。谢谢大家的帮助，没有你们就做不到！！！

例如，我尝试了 Neeraj 的示例，但最后一个菜单/子菜单无法使用 JSBin 关闭。经过一些试验和错误，似乎通过添加另一个数字（在本例中为 4）现在允许菜单/子菜单 #3 完美地打开/关闭。不知道为什么，但它对我有用！

$.each([1,2,3], function(index) {
$( ".menu"+index ).click(function() {
$( ".submenu"+index ).slideToggle( "fast", function() {
// Animation complete.
});
});
}

再次感谢！

我还注意到 JSBin 是一个很棒的工具（它会用很容易注意到的红色字体显示任何错误）。

当你想“整理”你的代码时，JSfiddle 也很棒，真是节省时间！我的网站真的来了，我再高兴不过了。感谢所有提出意见和示例的人。

Answer 4

$( ".menu" ).click(function() {
   $( ".submenu" ).slideToggle( "fast", function() {
   // Animation complete.
   });
});

 $( ".menu2,.menu3" ).click(function() {
   $( ".submenu2" ).slideToggle( "fast", function() {
   // Animation complete.
   });
});