js实现一个多级树形选择菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现一个多级树形选择菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<style>
    @font-face {font-family: "verTreeIcon";
  src: url('iconfont.eot?t=1532158763268'); /* IE9*/
  src: url('iconfont.eot?t=1532158763268#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1532158763268') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1532158763268#iconfont') format('svg'); /* iOS 4.1- */
}

.verTreeIcon {
  font-family:"verTreeIcon" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-plus:before { content: "\e67c"; }

.icon-gobottom:before { content: "\e65d"; }

.icon-minus:before { content: "\e68b"; }

.icon-check-box-others:before { content: "\e662"; }

.icon-info:before { content: "\e7c5"; }

.icon-menu:before { content: "\e603"; }

.icon-check-box-cicre:before { content: "\e65a"; }

.icon-warning:before { content: "\e68f"; }

.icon-error:before { content: "\e621"; }

.icon-edit-remark:before { content: "\e623"; }

.icon-info-o:before { content: "\e614"; }

.icon-check-box:before { content: "\e600" !important;width: 30px; }

.icon-caret-left:before { content: "\e6cc"; }

.icon-caret-down:before { content: "\e6cd"; }

.icon-caret-right:before { content: "\e6ce&qu.........完整代码请登录后点击上方下载按钮下载查看