在其他菜单关闭时单击某个菜单

 
Menu 1 
 
submenu 1
 
submenu 2 
 submenu 3 
submenu 4
 
 
 
 Menu 2 
 
submenu 1
 
submenu 2 
 submenu 3 
submenu 4
 
 
 
 
  

脚本：

  if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]==obj){ return i; } } return -1; } } function categoryAdd(id) { var ids = new String($.cookie('expanded')).split(','); if (ids.indexOf(id) == -1){ ids.push(id); $.cookie('expanded', ids.join(','), {path: '/'}); } } function categoryRemove(id) { var ids = new String($.cookie('expanded')).split(','); // bug #7654 fixed while (ids.indexOf(id) != -1) { ids.splice(ids.indexOf(id), 1); } $.cookie('expanded', ids.join(','), {path: '/'}); } $('.category_button').click(function(e){ var change = ''; var current = $(this).attr('current'); if(change == 'on') { var ids = new String($.cookie('expanded')).split(','); var exceptions = '' for(var i = 0; i < ids.length; i++) { id = ids[i]; current = $('category_' + ids[i]).attr('current'); if($('category_' + ids[i]).css('display') != 'none') { if(id != $(this).attr('id').split('-')[1] && $(this).parent().parent().attr('id').split('-')[1] == 'undefined') { hideAll(id, '256'); } } } } function hideAll(id, except) { if(id == except){return;} var button = $('#image-'+ id); button.attr('src', 'catalog/view/theme/default/image/btn-expand.png'); $('#category_' + id).hide(200); } function showMenu(id) { var button = $('#image-'+ id); button.attr('src', 'catalog/view/theme/default/image/btn-collapse.png'); $('#category_' + id).show(200); } function toggleMenu(e,id, current) { if(current == '1') { e.preventDefault() var button = $('#image-'+ id); if ($('#category_'+id).css('display') == 'none'){ button.attr('src', 'catalog/view/theme/default/image/btn-collapse.png'); categoryAdd(id); } else { button.attr('src', 'catalog/view/theme/default/image/btn-expand.png'); categoryRemove(id); } $('#category_'+id).toggle(200); } else { var button = $('#image-'+ id); if ($('#category_'+id).css('display') == 'none'){ categoryAdd(id); } else { categoryRemove(id); } } } 

我如何制作一个菜单，我点击某个项目然后打开，其他OPENED菜单

标签将关闭，例如display: none ，而且父菜单不需要关闭，只有同一级别的菜单，但不是父母，也不是父母的兄弟菜单，但不是他的父母，我想你明白我在说什么..我真的不知道怎么做，我以前做过的它的工作很糟糕……也许这里有某种递归？但是怎么样？

有任何想法吗？

更新：

所以现在我们有两个function，即从cookie中添加或删除已打开/关闭的菜单列表，

例如，在cookies中，我们保存ID为100,200,300,250,160的菜单

那么我怎么能在循环中关闭所有带有id的菜单，而不是我们现在点击的当前菜单，而不是他的父…

Answer 1

这可以使用javascript / jquery插件完成，你需要做一些谷歌搜索才能找到一个。 您只需要根据您的规格调整插件。一旦找到插件并尝试使用它，那么如果您需要帮助，您可以回到这里。 当你有一些可靠的代码表明你已经耗尽了你的才能时，它会显示出更多的努力。 研究其中的一些，如果我理解正确，我想你想要一个手风琴菜单。 jQuery的

Answer 2

谷歌搜索一些不同的CSS菜单可能会更好。 但是根据你的基本HTML（提供清理，你缺少一个或两个关闭的li标签），你可以使用以下内容：

的jsfiddle

脚本[ _{更新以显示我如何支持小提琴上的子标记，请记住，您可以编辑此代码以便随意执行，有关每个部分如何工作的更多信息，请参阅jQuery API} ]

 $("ul > li > ul").hide(); $("ul > li").click(function(e) { e.stopPropagation(); $(this).children().toggle(function(e) { if (!$(this).is(":visible")) { $(this).find("ul").hide(); $(this).find("sub").show(); }; }); $(this).siblings().each(function(i) { if ($(this).children("ul").length > 0) { if ($(this).children("ul").css("display").toLowerCase() == "block") { $(this).children().toggle(function(e) { if (!$(this).is(":visible")) { $(this).find("ul").hide(); $(this).find("sub").show(); }; }); } } }); }); $("ul > li").each(function(i) { if ($(this).children("ul").length > 0) { $(this).css("cursor", "pointer").prepend($("").text("[has submenu]")); } else { $(this).css("cursor", "default"); }; }); 

清洁HTML

 
 
Menu 1 
 
submenu 1
 
submenu 2 
 
submenu 3
 
submenu 4
 
 
 
 
 
Menu 2 
 
submenu 1
 
submenu 2 
 
submenu 3
 
submenu 4 
 
subsubmenu 1
 
subsubmenu 2