,直接上代码吧,代码太乱功能有就好,后需改正。。。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
<title></title>
<meta charset="utf-8" />
<style>
#gggg ul {
display: none;
}
.hhf_select {
background-image: url(/img/aaa.png);
background-repeat: no-repeat;
background-position: left center;
}
.hhf_select.active {
background-image: url(/img/bbb.png);
}
select{
display: block;
}
#bbbb > div{
width: 100%;
margin-top: 10px;
}
#bbbb > div > span{
width: 120px;
margin-right: 20px;
background: gray;
}
.navWrap .navIcon{
width: 14px;
height: 14px;
display: inline-block;
background: #fff;
margin: 5px 10px 0 0;
}
</style>
</head>
<body>
<div id="bbbb" class="navWrap"></div>
<script>
(function ($) {
$.fn.AddSelect = function (opation) {
var _arg = $.extend({
data: ""
, id: "a"
, name: "b"
, link: "c"
}, opation);
var _this1 = this;
var data = JSON.parse(_arg.data);
renderNav();
function renderNav(){
var _html = '<div>'; //初级设置
for (var i = 0; i < data.length; i++) {
var img = ""+(data[i].img ?"<i class='navIcon' style='background: url("+data[i].img+") no-repeat center'></i>": "");
console.log(img);
_html += "<span data-level='"
+data[0].level
+"' data-index='"+i+
"' data-datas='"
+JSON.stringify(data[i][_arg.link])+"'>"
+ img
+ data[i].n
+"</span>";
}
_html += "</div>";
$(_this1).append(_html);
}
}
})(jQuery)
var _json = [
{
"v": "1",
"n": "这里是多级",
"level":1,
"img": "localStorage.png",
"s": [
{
"v": "3",
"n": "第二级",
"level":2,
"s": [
{
"v": "8",
"n": "第三级",
"level":3,
"s": [
{
"v": "9",
"n": "有一分耕耘",
"level":4
}
]
}
]
},
{
"v": "4",
"n": "新闻一级1",
"level":2,
"s": [
{
"v": "10",
"n": "55",
"level":3,
"s": [
{
"v": "11",
"n": "551",
"level":4,
"s": [
{
"v": "13",
"n": "321",
"level":5
}
]
}
]
}
]
},
{
"v": "5",
"n": "动态一",
"level":2
}
]
},
{
"v": "2",
"n": "文章",
"level":1,
"img": "localStorage.png",
"s": [
{
"v": "7",
"level":2,
"n": "6666"
}
]
},
{
"v": "6",
"level":1,
"img": "localStorage.png",
"n": "哈哈哈"
},
{
"v": "12",
"level":1,
"n": "12"
}
];
$("#bbbb").AddSelect({
data: JSON.stringify(_json)
, id: "v"
, name: "n"
, link: "s"
});
$("#bbbb").AddSelect({
data: JSON.stringify(_json)
, id: "v"
, name: "n"
, link: "s"
});
$("#bbbb").click(function(e){
var ele = e.target || e.srcElement;
// ele.dataset.datas || IE低版本不兼容dataset属性统一换getAttribute()
newData = ele.getAttribute("data-datas");
var navWrap = $(this);
if(e.target.id == "bbbb"){
newData =JSON.stringify(_json);
return;
}
if(newData == "undefined" || !newData){
removeSubNav();
return
}
removeSubNav();
function removeSubNav() {
var targetParentIndex = $(e.target).parent().index();
navWrap.children().each(function (idx, e) {
if(idx > targetParentIndex){
$(this).remove();
}
});
}
$("#bbbb").AddSelect({
data: newData
, id: "v"
, name: "n"
, link: "s"
});
});
</script>
</body>
</html>