jquery - 使用 CSS3 的响应式菜单

Question

我有一个响应式菜单，我正在尝试使用过渡创建它。我已经通过 jsFiddle 创建了一个，可以在这里找到:

http://jsfiddle.net/FN37X/

我正在使用的 JS:

$(document).ready(function(){
$(".menu-button").click(function () {
    if ($(".menu").hasClass('close') ) {
            $(".menu").removeClass('close').addClass('open');
        } 
    else if ($(".menu").hasClass('open') ) {
            $(".menu").removeClass('open').addClass('close');
        }
});
});

我的问题是，
是否可以拥有此菜单，而无需在调整窗口宽度方式时出现短暂的过渡。

我的目标是拥有一个无需使用 css 即可向下滑动的响应式菜单!重要(我发现使用 toggleSlide 需要这个？

Answer 1

是的，我认为 slideToggle() 是最好的选择，因此您还可以删除影响窗口大小调整的 CSS transition。

在您的 CSS 中删除 .open{} 和 .close{} 样式，然后在您的 .menu 中添加 display:无和top:50px(黑色.box-menu的高度)。

那么你的脚本将是:

$(document).ready(function(){   
    $(".menu-button").click(function(){
        $('.menu').slideToggle();
    });
});

查看此 jsfiddle