使用 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 的情况下创建一个向下滑动的响应式菜单 !important（我发现使用 toggleSlide 需要这个？

Answer 1

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

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

那么您的脚本将是：

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

看到这个jsfiddle

Answer 2

这是一个快速的解决方案

$(window).on("resize",function(event){
    $(".menu").css("display","none");

})
$(window).on("debouncedresize",function(event){
    $(".menu").css("display","block");

})

只需在您的文档中包含 debounce resize 脚本： https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js

不过，我花了一些时间才找到解决反跳调整大小的方法。

http://jsfiddle.net/prollygeek/FN37X/5/