导航菜单滑动效果+解决两个js的执行顺序问题

    上一篇博客介绍了动态加载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>

   在实现的过程中发现无论我如何改写菜单的单击事件都没有响应，最后通过调试发现是我动态拼接div的js和滑动菜单的js执行顺序的原因。滑动菜单的js会在菜单加载前执行，所以单击事件不能响应。

   通过查询解决基本确定解决方法有三种：

第一种，使用Razor语法，直接在cshtml中编写for循环

第二种，使用延迟

第三种，使用嵌套

   首先Razor语法不太熟悉，第一次接触，尝试无果。使用延迟由于时间的不确定性，不能确定延迟多长时间，所以最后使用嵌套。非常简单，就是在首先执行的js中直接调用后执行js方法即可。这里直接在要首先执行的js代码中调用Index.Init()就可以了。

写在后面：

导航菜单的效果很多，网上可参考的代码很多，而且也很容易理解，值得我们去多多发现。每实现一个功能时很兴奋的，要慢慢的开始学会享受解决问题的过程。