jQuery - 隱藏主ul單擊子菜單

Question

我有這個jQuery腳本從json樹輸出HTML菜單。

$(function() { 

    var data = { 
     menu: [{ 
      name: 'Croatia', 
      link: '0', 
      sub: null 
     }, { 
      name: 'England', 
      link: '1', 
      sub: [{ 
       name: 'Arsenal', 
       link: '0-0', 
       sub: null 
      }, { 
       name: 'Liverpool', 
       link: '0-1', 
       sub: null 
      }, { 
       name: 'Manchester United', 
       link: '0-2', 
       sub: null 
      }] 
     }, { 
      name: 'Spain', 
      link: '2', 
      sub: [{ 
       name: 'Barcelona', 
       link: '2-0', 
       sub: null 
      }, { 
       name: 'Real Madrid', 
       link: '2-1', 
       sub: null 
      }] 
     }, { 
      name: 'Germany', 
      link: '3', 
      sub: [{ 
       name: 'Bayern Munich', 
       link: '3-1', 
       sub: null 
      }, { 
       name: 'Borrusia Dortmund', 
       link: '3-2', 
       sub: null 
      }] 
     }] 
    }; 
    var getMenuItem = function (itemData) { 
     var item = $("<li>") 
      .append(
     $("<a>", { 
      href: '#' + itemData.link, 
      html: itemData.name 
     })); 
     if (itemData.sub) { 
      var subList = $("<ul>"); 
      $.each(itemData.sub, function() { 
       subList.append(getMenuItem(this)); 
      }); 
      item.append(subList); 
     } 
     return item; 
    }; 

    var $menu = $("#menu"); 
    $.each(data.menu, function() { 
     $menu.append(
      getMenuItem(this) 
     ); 
    }); 
    $menu.menu(); 
}); 

和HTML：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<ul id="menu"></ul> 

，沒有工作，它輸出HTML菜單，但我想子菜單的被隱藏，直到訪問者點擊就可以了。

所以把它清除掉，我們把這個菜單，例如：

Primary Menu 1 
    - Submenu item 1 
    - Submenu item 1 

Primary Menu 2 
    - Submenu item 2 
    - Submenu item 2 

一旦訪問者點擊「主菜單1」，就應該隱藏所有的主菜單的，只顯示子菜單項。

我該如何獲得這個結果？

---

更新;設法得到它工作正常（JSON也裝載在不同的文件了。）

$(window).load(function(){ 
    $(function() { 
     var getMenuItem = function (itemData) { 
      var item = $("<li>") 
       .append(
      $("<a>", { 
       href: '#' + itemData.link, 
       html: itemData.name 
      })); 
      if (itemData.sub) { 
       var subList = $('<ul>', {'class':'sub-menu'}); 
       $.each(itemData.sub, function() { 
        subList.append(getMenuItem(this)); 
       }); 
       item.append(subList); 
      } 
      return item; 
     }; 

     var $menu = $("#menu"); 
     $.each(data.menu, function() { 
      $menu.append(
       getMenuItem(this) 
      ); 
     }); 

     $(".sub-menu").hide(); 

     $("li").click(function (e) { 
      e.stopPropagation(); 
      $(this).children('ul').slideToggle(); 
     }); 
    }); 
}); 

Answer 1

後，所有的菜單創建代碼，你會希望通過添加一個類有子菜單的所有菜單項啓動。你可以在你的創建代碼中做到這一點。

var subList = $('<ul>', {'class':'sub-menu'}); 

從那裏你應該能夠知道哪些菜單項有子菜單，你可以從那裏做各種事情。

一個例子可能是在css中給sub-menu默認高度0。然後將點擊事件添加到您的<ul class="sub-menu">父母<li>以設置菜單高度的動畫，同時向<li>添加一個類以知道它何時打開或關閉。

$('.sub-menu').parent().on('click', function(){ 
    $(this).toggleClass('active'); 
    if ($(this).hasClass('active')){ 
    $(this).children('.sub-menu').animate({'height':'auto'); 
    } else { 
    $(this).children('.sub-menu').animate({'height':'0'); 
    } 
}); 

你甚至可以採取更進了一步，做對有子菜單的所有菜單項的檢查，以確保如果新打開前以前打開一個被關閉。

//Inside the previous click handler as the 1st thing in it. 
$(this).siblings().removeClass('active'); 

如果該代碼適用於您的情況（取決於現有樣式），但它應該爲您提供想要實現的想法。