mvc基于 ajax实现菜单下拉列表

前段时间一直没有想到这种方法，所以一直在用easyUI插件，不过我觉得吧还是自己写比较满意；话不多说直接上码

@model IEnumerable<tree.Models.ajaxtree>

@{
ViewBag.Title = "detail";
}

<h2>detail</h2>

<script type="text/javascript">

var flat=true;

function csschange(cid){
var dd=$("#"+cid+"-div").css("display");
//alert(dd);
if(dd=="block"){
// alert(111);
$("#"+cid+"-div").hide(1000);
// flat=false;
}
else{
$("#"+cid+"-div").show(1000);
// flat=true;
}
}
var html = "";

function changes(cid) {

$.ajax({
url: "/tree/treeList",
dataType: "json",
data: { "cid": cid },
type: "post",
success: function (list) {
for (s in list) {
html = "<li><a href=‘#‘>" + list[s].name + "</a></li>";
$("#" + cid + "-div").append(html);
}
$("#"+cid+"-a").removeAttr("onclick");
$("#"+cid+"-a").attr("onclick","csschange("+cid+")");
$("#"+cid+"-a").css("display","block");
}

});
}

</script>

<style type="text/css">
.cc {
width: 90px;
height: auto;
background-color: #FEFEFE;
}
</style>
<div class="container">
<div class="nav" style="width:120px;">
@foreach (var c in Model)
{
<a id="@c.cid-a" href="javascript:void();" onclick="changes(@c.cid)" class="btn btn-default text-warning cc">@c.name</a>
<div id="@c.cid-div">

</div>
}

</div>
</div>