bootstrap树形菜单

最新推荐文章于 2024-02-27 17:45:16 发布

曲小强

最新推荐文章于 2024-02-27 17:45:16 发布

阅读量2.4k

点赞数 1

分类专栏：杂货铺文章标签： bootstrap

本文链接：https://blog.csdn.net/quhongqiang/article/details/78522957

版权

杂货铺专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .tree {
      min-height: 20px;
      padding: 19px;
      margin-bottom: 20px;
      background-color: #fbfbfb;
      border: 1px solid #999;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
    }

    .tree li {
      list-style-type: none;
      margin: 0;
      padding: 10px 5px 0 5px;
      position: relative
    }

    .tree li::before,
    .tree li::after {
      content: '';
      left: -20px;
      position: absolute;
      right: auto
    }

    .tree li::before {
      border-left: 1px solid #999;
      bottom: 50px;
      height: 100%;
      top: 0;
      width: 1px
    }

    .tree li::after {
      border-top: 1px solid #999;
      height: 20px;
      top: 25px;
      width: 25px
    }

    .tree li span {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border: 1px solid #999;
      border-radius: 5px;
      display: inline-block;
      padding: 3px 8px;
      text-decoration: none
    }

    .tree li.parent_li>span {
      cursor: pointer
    }

    .tree>ul>li::before,
    .tree>ul>li::after {
      border: 0
    }

    .tree li:last-child::before {
      height: 30px
    }

    .tree li.parent_li>span:hover,
    .tree li.parent_li>span:hover+ul li span {
      background: #eee;
      border: 1px solid #94a0b4;
      color: #000
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="col-md-5">
          <div class="tree well">
            <ul>
              <li class="parent_li">
                <span title="Collapse this branch badge-success"><i
                    class="icon-folder-open"></i>老大</span>
                <a href="">跳转占位</a>
                <ul>
                  <li class="parent_li">
                    <span title="Collapse this branch"><i class="icon-minus-sign"></i> 1级</span>
                    <a href="">跳转占位</a>
                    <ul>
                      <li>
                        <span><i class="icon-leaf"></i> 2级</span>
                        <a href="">跳转占位</a>
                        </li>
                      </ul>
                    </li>
                  <li class="parent_li">
                    <span title="Collapse this branch"><i class="icon-minus-sign"></i> 1级</span>
                    <a href="">跳转占位</a>
                    <ul>
                      <li>
                        <span><i class="icon-leaf"></i> 2级</span>
                        <a href="">跳转占位</a>
                        </li>
                      <li class="parent_li">
                        <span title="Collapse this branch"><i class="icon-minus-sign"></i>
                          2级</span>
                        <a href="">跳转占位</a>
                        <ul>
                          <li class="parent_li">
                            <span title="Collapse this branch"><i
                                class="icon-minus-sign"></i> 3级</span>
                            <a href="">跳转占位</a>
                            <ul>
                              <li>
                                <span><i class="icon-leaf"></i> 4级</span>
                                <a href="">跳转占位</a>
                                </li>
                              <li>
                                <span><i class="icon-leaf"></i> 4级</span>
                                <a href="">跳转占位</a>
                                </li>
                              </ul>
                            </li>
                          <li>
                            <span><i class="icon-leaf"></i> 3级</span>
                            <a href="">跳转占位</a>
                            </li>
                          <li>
                            <span><i class="icon-leaf"></i> 3级</span>
                            <a href="">跳转占位</a>
                            </li>
                          </ul>
                        </li>
                      <li>
                        <span><i class="icon-leaf"></i> 2级</span>
                        <a href="">跳转占位</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              <li class="parent_li">
                <span title="Collapse this branch"><i class="icon-folder-open"></i> Parent2</span>
                <a href="">跳转占位</a>
                <ul>
                  <li>
                    <span><i class="icon-leaf"></i> 1级</span>
                    <a href="">跳转占位</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        <div>
          </div>
        </div>
      </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  //<![CDATA[
  $(window).load(function () {
    $(function () {
      $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
      $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
          children.hide('fast');
          $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
          children.show('fast');
          $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
      });
    });
  }); //]]>
</script>
<script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent) {
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "wu4askwa"
    }], "*")
  }
</script>

</html>

曲小强

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap树形菜单

效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫