Question

我喜欢这方面的帮助。我正在构建一个响应式下拉菜单，根据浏览器窗口大小在隐藏/可见状态之间切换。它基于我在网上找到的jQuery解决方案。

最小（移动）版本。当点击事件被触发时，菜单会立即下降，但我真的要添加一个“动画”功能，以便逐渐打开。

对jQuery没有太多经验，我希望有人可以建议在我的代码中添加“animate”命令的位置。

感谢您的期待。

=========这是Javascript：

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 600) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    }
    else if (ww >= 600) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

=================这是html：

<nav class="main_navigation"> 

        <ul class="nav">
            <li><a href="item1.php"><span>Item1</span></a></li>
            <li><a href="item2.php"><span>Item2</span></a></li>
            <li><a href="item3.php"><span>Item3</span></a></li>
            <li><a href="item4.php"><span>Item4</span></a></li>
            <li><a href="item5.php"><span>Item5</span></a></li>
        </ul>

Answer 1

而不是使用jquery来创建响应式设计，您是否考虑过使用诸如骨架之类的CSS基础？

http://www.getskeleton.com/

如果不这样做，我建议使用媒体查询根据页面大小修改导航的CSS。就jquery而言，您可以使用slideToggle

Answer 2

很抱歉，我在我的手机上回答了这一点，因此没有足够的空间来输入，这是我最近用来做类似事情的代码：

<div id="mobile_menu">
<p id="mobile_menu_btn">Menu</p>
<ul id="mobile_menu_ul">
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="news.html">News</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="social.html">Social</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- mobile_menu -->

$("#mobile_menu_btn").click(function () {
        $("#mobile_menu_ul").slideToggle('slow', function() {
  menuDown = true});

});

在将其放入代码方面，您可以尝试编辑它们，使其看起来像这样：

if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").slideUp('slow');
        } else {
            $(".nav").slideDown('slow');
        }

将“animate”添加到jquery下拉菜单

2 个答案: