像超级滑动子菜单

Question

我正在创建一个菜单，如超级帮助页面here。我怎样才能达到与点击菜单项目相同的菜单类型，子菜单出现滑动，其他菜单项目分散。我怎样才能做到这一点

<div class="side-memu"> 
    <div class="wrap"> 
    <ul> 
     <li>Lorem 
     <ul> 
     <li><p>dddd</p></li> 
     <li>111</li> 
     <li>111</li> 
     <li>111</li> 
     </ul> 
     </li> 
     <li>Lorem</li> 
     <li>Lorem</li> 
     <li>Lorem</li> 
    </ul> 
    </div> 
</div> 


.side-memu { width:300px; background:#dfdfdf; height:200px;} 

Answer 1

试试这个：

.side-memu { width:300px; background:#dfdfdf; height:200px;} 
.side-memu ul ul{display:none} 

HTML：

<div class="side-memu"> 
    <div class="wrap"> 
    <ul> 
     <li>Lorem 
     <ul> 
     <li><p>dddd</p></li> 
     <li>111</li> 
     <li>111</li> 
     <li>111</li> 
     </ul> 
     </li> 
     <li>Lorem 
     <ul> 
      <li><p>CCCC</p></li> 
      <li>222</li> 
      <li>222</li> 
      <li>222</li> 
     </ul> 
     </li> 
     <li>Lorem</li> 
     <li>Lorem</li> 
    </ul> 
    </div> 
</div> 

的Jquery：

$('.side-memu .wrap > ul > li ').click(function(){  
     $(this).children('ul').slideToggle(); 
    }); 

    $(document).mouseup(function (e) 
    { 
     var menu = $(".wrap > ul > li > ul"); 

     if (!menu.is(e.target) // if the target of the click isn't the container... 
      && menu.has(e.target).length === 0) // ... nor a descendant of the container 
     { 
      menu.slideUp(); 
     } 
    }); 

这里是工作示例：https://jsfiddle.net/npLhmhe7/

Answer 2

为什么不尝试一些响应式导航插件？

有您的需求提供一些导航菜单插件它们，

1. slinky Navigation Menu

2. Jquery mmenu

3. Multi Level push menu