<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>by 司徒正美</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery.js"></script><!--jquery必须放在前面-->
<script src="avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
array: [
{
name: 111111,
child: [
{name: 1.1},
{name: 1.2},
{name: 1.3},
]
},
{
name: 22222,
child: [
{name: 2.1},
{name: 2.2},
{name: 3.3},
]
},
{
name: 33333,
child: [
{name: 3.1},
{name: 3.2},
{name: 3.3}
]
}
],
selectedIndex: 0
})
$(function () {
$(document).on("click", ".first-menu li", function () {
$(".show .second-menu").css("margin-left", -200)
$(".show").removeClass("show").width(0)
var _this = this
setTimeout(function () {
$(_this).addClass("show").find(".second-menu").animate({
width: 200
}, 500)
$(".second-menu", _this).animate({
marginLeft: 0
}, 500)
})
})
})
</script>
<style>
.first-menu, .second-menu {
padding: 0px;
margin: 0px;
list-style: none;
}
.first-menu, .second-menu-wrap {
position: relative;
background: #666;
}
.first-menu > li, .second-menu > li{
width:200px;
height:30px;
line-height: 2;
color: #fff;
border-bottom: 1px solid #333;
}
.first-menu{
width:200px;
}
.second-menu-wrap{
background: red;
position: absolute;
top: 0px;
left: 200px;
overflow: hidden;
}
.second-menu-wrap ul{
margin-left:-200px;
}
.second-menu-wrap.show ul{
margin: 0px;
}
</style>
</head>
<body>
<div ms-controller="test">
<ul class="first-menu">
<li ms-repeat="array" >
{{el.name}}
<div class="second-menu-wrap">
<ul class="second-menu">
<li ms-repeat-elem="el.child">
{{elem.name}}
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
]]>
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
