.slideup（）删除整个ul而不仅仅是嵌套的li(.slideup() removing entire ul instead of just the nested li)

与这个badboy有一些问题：

基本上需要它，以便当其中一个隐藏列表折叠时，检查标记是否已经打开任何其他“活动”列表，并在打开新列表之前关闭它们。如果不止一个同时打开，它看起来很乱。

链接： http ： //www.matchboxlondon.com/ten/menu3/index.html

尝试： 1.单击“菜单” 2.单击“服务” 3.单击“普拉提”以展开 4.单击“健身”以展开

问题：使用.slideup（）时也会删除标题。

我的代码目前正在做的是检查是否有一个名为'somethingOpen'的全局定义变量打开了 - 在页面加载时设置为null。这一切都很好，但我觉得它可能与完整的显示有关：没有可折叠的列表：

因为它很清晰，我只会在这里包含js而不是标记：

somethingOpen = null; // to set after close and open $('#cssmenu > ul > li > a').click(function () { if (somethingOpen === true) { // first check $("#cssmenu > ul > li").each(function () { $("#cssmenu > ul > li.active").removeClass('active').slideUp(); // <-- problem here somethingOpen = false; // closing so set to false return false; // exit function }); } // End somethingOpen if // Open var checkElement = $(this).next(); // more checks $(this).closest('li').addClass('active'); // add active class somethingOpen = true; // redefine if anything is open // Close if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); somethingOpen = false; } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } // Returns if (checkElement.is('ul')) { return false; } else { return true; } }); // End click

Having a few issues with this badboy:

Basically need it so that when one of the hidden lists collapses the markup is checked to see if there are any other 'active' lists already open, and to close those before a new one is opened. It looks messy if more than one is open at the same time.

Link: http://www.matchboxlondon.com/ten/menu3/index.html

Try: 1. Click Menu 2. Click Services 3. Click Pilates to expand 4. Click Fitness to expand

Problem: Heading is also removed when .slideup() is used.

What my code is doing at the moment is checking to see if anything is opened with a globally defined variable called 'somethingOpen' - this is set to null on page load. This is all well and good BUT I feel it may have something to do with the complete display:none of the collapsable lists:

Because it's listy and nesty, I'll only include the js in here and not the markup:

somethingOpen = null; // to set after close and open $('#cssmenu > ul > li > a').click(function () { if (somethingOpen === true) { // first check $("#cssmenu > ul > li").each(function () { $("#cssmenu > ul > li.active").removeClass('active').slideUp(); // <-- problem here somethingOpen = false; // closing so set to false return false; // exit function }); } // End somethingOpen if // Open var checkElement = $(this).next(); // more checks $(this).closest('li').addClass('active'); // add active class somethingOpen = true; // redefine if anything is open // Close if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); somethingOpen = false; } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } // Returns if (checkElement.is('ul')) { return false; } else { return true; } }); // End click

最满意答案

尝试这个：

//$("#cssmenu > ul > li.active").removeClass('active').slideUp(); // -- problem here $("#cssmenu > ul > li.active").animate({height: "toggle", opacity: "toggle"}, 'fast');

For anyone that was interested, it needed a little tweaking, using children() and an after (>) to properly select the right element.

somethingOpen = null; // to set after close and open

$('#cssmenu > ul > li > a').click(function () { if (somethingOpen === true) { // first check $("#cssmenu > ul > li").each(function () { $("#cssmenu").children('.active').removeClass('active'); $("#cssmenu > ul > li > ul").slideUp('normal'); somethingOpen = false; // closing so set to false return false; // exit function }); // end each } }); // End somethingOpen if

更多推荐