點擊一些菜單上，而其他關閉

Question

<ul> 
    <li>Menu 1 
    <ul> 
     <li>submenu 1</li> 
     <li>submenu 2 
     <ul> 
      submenu 3 
      <li>submenu 4</li> 
     </ul> 
     </li> 
    </ul> Menu 2 
    <ul> 
     <li>submenu 1</li> 
     <li>submenu 2 
     <ul> 
      submenu 3 
      <li>submenu 4</li> 
     </ul> 
     </li> 
    </ul> 
    <li> 
</ul> 

腳本：

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

     } 

} 

我怎樣才能讓在那裏我點擊一些項目的菜單，它打開，其他打開的菜單<ul>標籤將關閉例如display: none，但父菜單不需要關閉，只有菜單在同一級別，但不是父母，也是父母的兄弟菜單，但不是他的父母，我想你明白我在說什麼..我真的不知道如何做到這一點，我做了什麼之前，它的工作不好...也許它在這裏的某種遞歸？，但如何？

有什麼想法？

UPDATE：

所以現在我們在這裏有2個功能被添加或餅乾刪除已打開/關閉菜單的列表，

例如在我們保存的菜單，餅乾編號：100,200,300,250,160

所以我怎麼能使一個循環關閉所有的菜單與該id，但不是我們現在點擊的當前菜單，而不是他的父母...

Answer 1

這可以使用javascript/j來完成查詢插件，你將需要做一些谷歌搜索找到一個。您只需根據您的規格調整插件。一旦找到插件並嘗試使用該插件，那麼如果您需要幫助，則可以返回此處。當你有一些可靠的代碼來顯示你已經精疲力盡時，它會顯示出更多的努力。研究其中的一些，如果我理解正確，我認爲你需要手風琴菜單。 Jquery

Answer 2

你可能會更好地搜索一些不同的CSS菜單，什麼不是。不過鑑於你的基本的HTML有（提供其清理乾淨，你缺少一個右李標籤或兩個），你可以使用以下內容：

jsFiddle

腳本[_{更新，以顯示我如何支持子標籤用小提琴爲好，記住，你可以編輯該代碼來請你做，ffor更多信息，每一部分的工作原理，請參閱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($("<sub />").text("[has submenu]")); 
    } 
    else { 
     $(this).css("cursor", "default"); 
    }; 
}); 

清潔HTML

<ul> 
    <li>Menu 1 
     <ul> 
      <li>submenu 1</li> 
      <li>submenu 2 
       <ul> 
        <li>submenu 3</li> 
        <li>submenu 4</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Menu 2 
     <ul> 
      <li>submenu 1</li> 
      <li>submenu 2 
       <ul> 
        <li>submenu 3</li> 
        <li>submenu 4 
         <ul> 
          <li>subsubmenu 1</li> 
          <li>subsubmenu 2</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    <li> 
</ul>