使用JS切换/显示一个已定义的DIV

我有一个小提琴： http ： //jsfiddle.net/vSs4f/

我想通过简单点击a.haschildren来显示div.sub-menu 。 如果正文加载div.sub-menu应该关闭。 如果我在a.haschildren div.sub-menu二次点击，则div.sub-menu应该关闭。

我已经采样了很多东西，但我认为DIV的问题很多。 一个想法是小提琴。

 $(function() { $("a.haschildren").click(function(e) { e.preventDefault(); $('div.sub-menu:visible').hide(); $(this).next('div.sub-menu').show(); }); }); 

我真的希望你能帮助我，谢谢！

Answer 1

尝试

 $(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(); }); }); 

演示： 小提琴

Answer 2

试试这个：-

小提琴

  $(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之前的一个点，任何其他兄弟姐妹之间进入这个仍然有效。

Answer 3

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

http://jsfiddle.net/vSs4f/6/

 $(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('
'); }); 

Answer 4

只需使用toggle()

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

Answer 5

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

http://api.jquery.com/toggle/

Answer 6

试试吧：

 $(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; }); });