美文网首页我爱编程
多级菜单小 demo

多级菜单小 demo

作者: sunxiaochuan | 来源:发表于2018-05-16 10:56 被阅读0次

    说明

    这里只贴下 html 和 js 了,css 较为简单,里面的一些类名是基于 bootstrap 框架的

    源码

    • html
    <ul class="nav nav-pills flex-column framework-list">
            <li>
              <i class="glyphicon glyphicon-triangle-bottom"></i>
              <span role="button">组织架构</span>
              <ul>
                <li>
                  <i class="glyphicon glyphicon-triangle-bottom"></i>
                  <span role="button">XXZ集团公司</span>
                  <ul>
                    <li>管理层</li>
                    <li>研发部</li>
                    <li>市场部</li>
                    <li>行政部</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
    
    • js 这个是基于的 jQuery 的写法
    $('.framework-list li:has(ul)').click(function(e) {
            e.stopPropagation()
            const ul = $(this).find('> ul')
            if (ul.is(':visible')) {
              ul.hide('fast')
            } else if (ul.is(':hidden')) {
              ul.show('fast')
            }
          })
    
    • 效果 gif 图
    Animation39.gif

    相关文章

      网友评论

        本文标题:多级菜单小 demo

        本文链接:https://www.haomeiwen.com/subject/yfqpdftx.html