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

为什么不试试一些自适应导航插件？

您的需求可用的导航菜单插件很少，

1. slinky Navigation Menu

2. Jquery mmenu

3. Multi Level push menu

Answer 2

试试这个：

.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/

像超级一样滑动子菜单

2 个答案: