Question

我希望我的菜单使用fadeToggle进行平板电脑和桌面视图（768px向上），但我希望我的导航能够在移动设备上滑动（767px及以下）。

$(document).ready(function() {  

    if($(window).width() >= 767){
    $('#toggleMenu').click( function(){
      $('ul.menu-nav').fadeToggle("1400");
    });    
    }        
});

但我无法采取进一步措施。

Answer 1

我会这样做，这将需要jQuery UI：

$(document).ready(function() {
    $('#toggleMenu').click( function(){
        var toggleEffect = $(window).width() >= 767 ? "fade" : "slide";
        $('ul.menu-nav').toggle( toggleEffect, 1400 );
    });        
});

Answer 2

<强> HTML

<a href="#" id="toggleMenu">Toggle Menu</a>
<ul class="menu-nav">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<强>的jQuery

$(document).ready(function() {  

    //Create a function for the two states.
    var toggleMenu = function() {
        if($(window).width() >= 767) {
            $('#toggleMenu').unbind('click').click( function(){
                $('ul.menu-nav').fadeToggle("1400");
            });    
        }
        else
        {
            //Smaller than 767
            $('#toggleMenu').unbind('click').click( function(){
                $('ul.menu-nav').slideToggle("1400");
            });   
        }
    };

    //Update if the window is resized and run the toggleMenu function.
    $( window ).resize(function() {
        toggleMenu();
    });
    toggleMenu();

});

工作示例： http://jsfiddle.net/psvtr9ad/1/

工作原理：

首先，创建一个名为toggleMenu的函数，其中包含条件逻辑。
该功能还将取消绑定之前的点击事件，以便再次调用时，它将有效地重置＆＃34;重置＆＃34;效果（幻灯片或淡入淡出切换之间）。
然后绑定一个窗口调整大小事件，以便在调整浏览器窗口大小时，再次运行该函数并使用正确的效果函数。
最后，调用该函数，使其在页面加载时执行。

在JQuery中使用slideToggle和fadeToggle

2 个答案: