lyear-dropdowntree下拉树状

下拉树状菜单插件实在太少，唯一找到的插件DropDownTree，也并不符合需求。所以这里自己弄了个下拉树状菜单的插件，支持单选和多选。可能会有一些bug存在。

![](/uploads/images/20220105/88d3cf5da7a3448c3a79d0a2bb4e67fe.png)
```css
.lyear-dropdown-tree {
    position: relative;
}
.lyear-dropdown-tree .checkbox-box,
.lyear-dropdown-tree .radio-box {
    font-size: 15px;
    cursor: pointer;
}
.lyear-dropdown-tree .arrow {
    margin-left: -15px;
}
.lyear-dropdown-tree .checkbox-box:before {
    content: "\F131";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-checked:before {
    content: "\F135";
}
.lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-half-checked:before {
    content: "\F6F1";
}
.lyear-dropdown-tree .radio-box:before {
    content: "\F130";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-checked:before {
    content: "\F134";
}
.lyear-dropdown-tree .radio-box.lyear-dropdown-tree-half-checked:before {
    content: "\F377";
}
.lyear-dropdown-tree .dropdown-menu {
    min-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    padding-bottom: 13px;
}
.lyear-dropdown-tree .dropdown-menu > li {
    margin-left:  15px;
}
.lyear-dropdown-tree .dropdown-menu li ul {
    list-style: none;
    padding-left: 25px;
}
.lyear-dropdown-tree .dropdown-menu li ul a {
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    padding: 3px 20px;
}
.lyear-dropdown-tree .dropdown-menu li a {
    display: inline-block;
    padding-left: 15px!important;
}
.lyear-dropdown-tree .dropdown-menu li a.lyear-dropdown-tree-a-checked {
    color: #33cabb;
}
.lyear-dropdown-tree .dropdown-menu a:hover,
.lyear-dropdown-tree .dropdown-menu a:active,
.lyear-dropdown-tree .dropdown-menu a:focus {
    background-color: transparent;
}
.lyear-dropdown-tree .form-control {
    padding-right: 30px;
    cursor: pointer;
}
.lyear-dropdown-tree i.lyear-cert {
    font-size: 20px;
    position: absolute;
    top: 3px;
    right: 5px;
}
```
```html
<div class="form-group">
  <label>选择栏目</label>
  <div class="lyear-dropdown-tree">
    <input type="text" class="form-control" value="" placeholder="请选择你要发布的栏目" data-toggle="dropdown">
  </div>
</div>
```
示例中的数据，直接设定为数据变量，你也可以根据自己情况从后端获取。
```javascript
var data = [
    {
      id: 1,
      title:"北京市",
      children: [
          {id: 101, title:"东城区"},
          {id: 102, title:"西城区"},
          {id: 103, title:"朝阳区"}
      ]
    },
    {
      id: 2,
      title:"天津市",
      children: [
          {id: 201, title:"和平区"},
          {id: 202, title:"河东区"},
          {id: 203, title:"河西区"}
      ]
    },
    {
      id: 3,
      title:"河北省",
      children: [
        {
            id: 301,
            title:"石家庄",
            children: [
                {id:3011, title: '长安区'},
                {id:3012, title: '桥西区'},
                {id:3013, title: '新华区'},
                {id:3014, title: '井陉矿区'},
                {id:3015, title: '裕华区'},
                {id:3016, title: '藁城区'},
                {id:3017, title: '鹿泉区'},
                {id:3018, title: '栾城区'},
            ]
        },
        {id: 302, title:"邯郸"},
        {id: 303, title:"保定"}
      ]
    }
];

插件项目中页面名字：`test_dropdowntree.html` `test_dropdowntree_v4.html`

[点击查看 下拉树状菜单 在线演示](http://example.itshubao.com/example/146.html "点击查看 下拉树状菜单 在线演示")

涉及的文件：
- `js/bootstrap.lyear.dropdowntree.min.js`