Question

我正在尝试实现一个切换按钮，允许用户动态折叠或展开垂直Kendo UI菜单。当我对slideToggle进行硬编码时，我得到了初始程序。但是，只要我尝试为简单循环添加逻辑以将slideToggle初始化为每个菜单，程序就会中断。数组中的计数器变量似乎存在问题（即，表示每个菜单的类的字符串数组）。我在这里做错了吗？我在JSFiddle中提供了下面的示例代码;您会注意到，当您取消注释硬编码部分时，它可以工作，但我想要工作的部分包括循环逻辑。提前感谢您的帮助！

http://jsfiddle.net/brandonq/KE8GX/3/

/////////////////////////////////////////////////
//               This harcode works            //
/////////////////////////////////////////////////

/*
        $("#menu1").click(function () {
          $(".hide1").slideToggle("slow");
        });

        $("#menu2").click(function () {
           $(".hide2").slideToggle("slow");
        }); 

*/

/////////////////////////////////////////////////
//               This is what I want           //
//                but doesn't work             //
/////////////////////////////////////////////////

// array of the classes assigned to each table
var temp = ["hide1", "hide2"];

   for (z = 1; z <= hides.length; z++) {
      $("#menu" + z).click(function () {
      // The count variable z somehow breaks the tables
      $("." + temp[z - 1]).slideToggle("slow");

      // This below works for one table (the left one)
      // $("." + temp[0]).slideToggle("slow");
      // so when you increment that array of strings, jquery
      // doesn't like it
   });
}

Answer 1

发生的事情是，在点击功能被触发之前，您的元素未在点击功能中分配，这使得z = 3，因为它已经一直通过环。所以它试图找到未定义的$('.' + temp[3-1])。

要解决此问题，我已完成的工作是将该功能附加到.k-items以外的所有.k-first：

for (z = 1; z <= temp.length; z++) {
    $("#menu" + z).click(function () {
        $('li.k-item:not(.k-first)', this).slideToggle('slow');
    });
}

Fiddle link

如果你使用它，你甚至可以放弃for循环：

$("ul.menu").click(function () {
    $('li.k-item:not(.k-first)', this).slideToggle('slow');
});

Fiddle link

Answer 2

一个问题和一个错误......

错误：您应该for (z = 1; z <= hides.length; z++) {写for (z = 1; z <= tables.length; z++) {，即tables而不是hides。

问题（实际错误）事件处理程序中z的值是最后一个值，而不是每个元素的值。尝试按.hide1更改每个.hide2和.hide，然后您的代码应为：

// array of the classes assigned to each table
for (z = 1; z <= tables.length; z++) {
    $("#menu" + z).click(function () {
        // The count variable z somehow breaks the tables
        $(".hide", this).slideToggle("slow");
    });
}

请在此处查看：http://jsfiddle.net/OnaBai/KE8GX/6/

或者@Samsquanch建议将循环删除为：

// array of the classes assigned to each table
$(".menu").click(function () {
    $(".hide", this).slideToggle("slow");
});

在一个非常简洁的代码中。请在此处查看：http://jsfiddle.net/OnaBai/KE8GX/8/

jQuery slideToggle动态内容

2 个答案: