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'); 

如果该代码适用于您的情况（取决于现有样式），但它应该为您提供想要实现的想法。