jQuery - 一次サブメニューをクリックすると一次ulを非表示にします

Question

私はjsonツリーからHTMLメニューを出力するこのjQueryスクリプトを持っています。

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

そこから、どのメニュー項目にサブメニューがあるのか​​を知ることができます。そこからさまざまなことができるはずです。

たとえば、sub-menuのデフォルトの高さをCSSで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'); 
    } 
}); 

あなたも、そのステップをさらに取ると新しいものが開かれる前に、前に開いた1が閉じてしまった場合を確認するために、サブメニューがあるすべてのあなたのメニュー項目に対してチェックを行うことができます。

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

あなたの状況（既存のスタイリングに応じて）で動作する場合は100％ではありませんが、達成しようとしているアイデアを提供する必要があります。