jquery - 如何使用 jquery 和 css 对齐动画菜单

Question

我一直在尝试使用 CSS 和 jquery 制作水平滑出式菜单。

问题:1) CSS - 当鼠标悬停在选项(本例中为“服务”)上时，菜单的其余部分将被按下。我不知道如何克服这个问题。

2) 我可以做些什么来使菜单在事件选项上保持打开状态？即，如果用户单击“服务 1”，菜单将保持打开状态(完全滑出)。

我在 Stackoverflow 上看到了这个，它似乎有我描述的相同问题: http://dabblet.com/gist/3635623/f69409ee9ee7e6613b7ed098a6a82b6a5445ed07

最后，我的 jsfiddle: http://jsfiddle.net/LJ4tH/13/

HTML:

    <nav>
    <ul id="menu-nav">
    <li><a href="#">About Us</a></li>
    <li class="has-flyout"><a href="#">Services</a>
    <ul class="flyout">
    <li class="active"><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
    </ul>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </nav>

JQuery:

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function() {
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},1000);
        },
        mouseleave: function(){
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},3000);
        }
     });
})(jQuery);

CSS:

    nav li { display: inline-block; }
    /*li a:hover { margin-top:0px; }/*This doesn't seem to work*/
    .flyout { display: inline-block; white-space: nowrap; margin-top: 0px; }
    /*ul.flyout li.active { margin-top: 0px; }
    ul.flyout. li. a:hover { margin-top: 0px; }*/

谢谢

晶圆厂

Answer 1

你可以尝试这样的事情:

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().animate({width: 'toggle'}, 500);
        },
        mouseleave: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().delay(500).animate({width: 'toggle'}, 500);
        },
        click: function () {
            $(this).toggleClass('active');
        }
    });
})(jQuery);

http://jsfiddle.net/LJ4tH/20/

没有看到元素被下推的问题，除非像 Dim3i 所说的那样，当文档不够宽时。