jQuery技术:使用JS切换/显示一个已定义的DIV

尝试

 $(function() { $("a.haschildren").click(function(e) { e.preventDefault(); var item = $(this).closest('div.haschildren').next().next('div.sub-menu').toggle(); $('div.sub-menu:visible').not(item).hide(); }); }); 

演示： 小提琴

试试这个：-

小提琴

  $(function () { $("a.haschildren").click(function (e) { e.preventDefault(); var subMenu = $(this).closest('div.haschildren').nextUntil('.sub-menu').next().toggle(); $('div.sub-menu:visible').not(subMenu).hide(); }); }); 

使用.nextUntil到达.sub-menu之前的一个点，任何其他兄弟姐妹之间进入这个仍然有效。

就个人而言，我对DOM的结构有很多改变。 我坚信你应该将你的javascript结构建立在一个结构良好的DOM上，因此遍历非常简单直观。 话虽这么说，我会稍微大胆地提交我的小提琴，希望如果没有别的，你可以看看它，并获得一些洞察力，如何利用一些DOM怪癖来使你的javascript成为一个更直观，更优雅。

 $(function() { $('#menu > div.item') .find('a').click(function() { var submenu_index = $(this).parents('.item:first').find('.sub-menu').toggle().index('.sub-menu'); // This chunk can disappear if you're not interested in hiding all of the other sub-menus $('.sub-menu').filter(function(index) { if(index != submenu_index) return true; }).hide(); }).end() .find('div:first').after('
'); }); 

只需使用toggle()

 $('div.sub-menu').toggle(); 

具有讽刺意味的是，您正在寻找的方法是.toggle（）;

试试吧：

需要了解更多jQuery教程分享使用JS切换/显示一个已定义的DIV，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

 $(function() { $("div.haschildren").click(function() { if($(this).next().next('div.sub-menu').is(":hidden")){ $('div.sub-menu:visible').hide(); $(this).next().next('div.sub-menu').show(); }else{ $(this).next().next('div.sub-menu').hide(); } return false; }); });