树状菜单

点击 + 可控制菜单的折叠与展开,如果当前节点无链接且有子项,当前节点的href="#none",即点击当前a标签也可控制菜单的折叠与展开

  
  <div class="menu_tree col-lg-3">
    <ul>
      <li><i class="fa fa-plus-square"></i><a href="#1"><i class="fa fa-folder"></i>父节点· 1</a></li>
      <li><i class="fa fa-plus-square"></i><a href="#2"><i class="fa fa-folder"></i>父节点· 2</a></li>
      <li>
        <i class="fa fa-plus-square"></i><a href="#3"><i class="fa fa-folder"></i>父节点· 3</a>
        <ul>
          <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 1</a></li>
          <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 2</a></li>
          <li><i class="fa fa-plus-square"></i><a href="#none"><i class="fa fa-folder"></i>子节点 · 3</a></li>
          <li>
            <i class="fa fa-plus-square"></i><a href="#none"><i class="fa fa-folder"></i>子节点 · 4</a>
            <ul>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 1</a></li>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 2</a></li>
              <li>
                <i class="fa fa-plus-square"></i><a href="#" title="子节点· 3"><i class="fa fa-folder"></i>子节点· 3</a>
              </li>
            </ul>
          </li>
          <li>
            <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>父节点· 5</a>
          </li>
        </ul>
      </li>
      <li>
        <i class="fa fa-plus-square"></i><a href="#none"><i class="fa fa-folder"></i>父节点· 4</a>
        <ul>
          <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 1</a></li>
          <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 2</a></li>
          <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 3</a></li>
          <li>
            <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 4</a>
            <ul>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 1</a></li>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 2</a></li>
              <li>
                <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 3</a>
              </li>
            </ul>
          </li>
          <li>
            <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>父节点· 5</a>
            <ul>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 1</a></li>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 2</a></li>
              <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 3</a></li>
              <li>
                <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点 · 4</a>
                <ul>
                  <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 1</a></li>
                  <li><i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 2</a></li>
                  <li>
                    <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>子节点· 3</a>
                  </li>
                </ul>
              </li>
              <li>
                <i class="fa fa-plus-square"></i><a href="#"><i class="fa fa-folder"></i>父节点· 5</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>