上一篇博客介绍了动态加载div实现导航菜单的显示,这篇博客介绍菜单滑动效果的实现,点击本菜单,其下子菜单滑动显示,其期菜单下的子菜单滑动隐藏。
上篇博客也已经介绍了拼接的div的相关代码,这里不再展示,下面是js滑动菜单代码:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">/* ----- Index ----- */
Index.MenuIndex = 0;
Index.MenuSpeed = 250;
Index.Init = function () {
// 菜单切换效果
var tits = $('.menu-tit');
var lists = $('.menu-list').hide();
$(lists[0]).slideDown(Index.MenuSpeed);
$.each(tits, function (i, el) { $(el).attr('index', i); });
tits.click(function (e) {
var me = $(this);
var index = parseInt(me.attr('index'));
if (index != Index.MenuIndex) {
var last = Index.MenuIndex;
Index.MenuIndex = index;
$(lists[last]).slideUp(Index.MenuSpeed);
$(lists[index]).slideDown(Index.MenuSpeed);
}
});
// 菜单点击事件
var links = $('a[target=content]');
if (links.length > 0) {
links.bind('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
Index.Open($(this).attr('href'));
});
//links[0].click();
}
Index.Open(Admin.IndexStartPage);
};</span></span>
通过查询解决基本确定解决方法有三种:
第一种,使用Razor语法,直接在cshtml中编写for循环
第二种,使用延迟
第三种,使用嵌套
首先Razor语法不太熟悉,第一次接触,尝试无果。使用延迟由于时间的不确定性,不能确定延迟多长时间,所以最后使用嵌套。非常简单,就是在首先执行的js中直接调用后执行js方法即可。这里直接在要首先执行的js代码中调用Index.Init()就可以了。
写在后面:
导航菜单的效果很多,网上可参考的代码很多,而且也很容易理解,值得我们去多多发现。每实现一个功能时很兴奋的,要慢慢的开始学会享受解决问题的过程。