Layui开发基础菜单

HTML代码 ：

<div class="layui-panel">
  <ul class="layui-menu" id="docDemoMenu1">
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title">menu item 1</div>
    </li>
    <li lay-options="{id: 101}">
      <div class="layui-menu-body-title">
        <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
      </div>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
      <div class="layui-menu-body-title">
        menu item 3 group <i class="layui-icon layui-icon-up"></i>
      </div>
      <ul>
        <li lay-options="{id: 1031}">menu item 3-1</li>
        <li lay-options="{id: 1032}">
          <div class="layui-menu-body-title">menu item 3-2</div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li lay-options="{id: 104}">
      <div class="layui-menu-body-title">menu item 4</div>
    </li>
    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
      <div class="layui-menu-body-title">
        menu item 5 
        <i class="layui-icon layui-icon-right"></i>
      </div>
      <div class="layui-panel layui-menu-body-panel">
        <ul>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-1</div>
          </li>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-2</div>
          </li>
        </ul>
      </div>
    </li>
    <li lay-options="{id: 106}">
      <div class="layui-menu-body-title">menu item 6</div>
    </li>
  </ul>
</div>

JS代码

layui.use('dropdown', function(){
  var dropdown = layui.dropdown;
  
  //菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指
  dropdown.on('click(docDemoMenu1)', function(options){
    var othis = $(this); //当前菜单列表的 DOM 对象
    console.log(options); //菜单列表的 lay-options 中的参数
  });
});

HTML代码   

<div class="layui-panel">
  <ul class="layui-menu" id="docDemoMenu1">
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title">menu item 1</div>
    </li>
  </ul>
</div>

查看更多关于Layui开发基础菜单的详细内容...