Question

一个菜鸟问题。答案可能很简单，但不知怎的，我无法弄明白，需要继续我的项目。

我有一个垂直导航菜单，我在悬停时向下滑动。但是，一旦它滑下来，我希望菜单保持打开状态。我已经尝试删除最后一行代码，但这看起来并不漂亮。

我曾尝试实施Stu Nicholls method，但没有让它发挥作用。但这就是我想要的效果。

我的HTML菜单是：

<nav id="verticalmenu">          
<ul>
  <li><a class="slide" href="#">Kalendarium</a>
  <ul class="down">
    <li><a href="#">Konzerte</a></li>
    <li><a href="#">Seminare</a></li>
    <li><a href="#">Vortraege</a></li>
  </ul>
</li>
<li><a href="#">Projekte</a>
  </ul>

和它的jquery：

<script type="text/javascript">



 (function($){

            //cache nav
            var nav = $("#verticalmenu");

            //add hovers to submenu parents
            nav.find("li").each(function() {
                if ($(this).find("ul").length > 0) {


                    //show subnav on hover
                    $(this).mouseenter(function() {
                        $(this).find("ul").stop(true, true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function() {
                        $(this).find("ul").stop(true, true).slideUp();
                    });
                }
            });
        })(jQuery);

非常感谢！

Answer 1

只需将它们隐藏在文档加载中。没有必要检查，jquery在内部做了

(function($){
     var nav = $("#verticalmenu");
        //add hovers to submenu parents
        nav.find("li").each(function() {
            var li_ul = $(this).find("ul");
                li_ul.hide();
                //show subnav on hover
                $(this).mouseenter(function() {
                    li_ul.stop(true, true).slideDown();
                });
        });
})(jQuery);

小提琴：http://jsfiddle.net/Redwb/3/

使垂直jquery向下滑动菜单保持打开状态

1 个答案: