Question

我正在尝试仅在移动设备上创建slideToggle导航。但是，这些设置也会影响较大的浏览器大小。在大型浏览器上，隐藏了第一个孩子：

#menu-menu-1 li {
    display: block;
}

#menu-menu-1 li:first-child {
    display: none;
}

在移动设备上，情况正好相反。显示第一个孩子，其余的隐藏：

#menu-menu-1 li {
    display: none;
}

#menu-menu-1 li:first-child {

    display: block;
}

因此，因为第一个孩子现在设置为display:block，你可以使用这个幻灯片切换：

  $('#menu-menu-1 li:first-child').click(function(e){
        e.preventDefault();
        $('#menu-menu-1 li:first-child').siblings().slideToggle();

    });

这很好用，直到您使用它来重新滑动内容，并更改浏览器大小。即使较大的浏览器媒体查询在display:none处有这些内容，所有兄弟会回到display:block。

浏览器扩展后是否有办法，忽略slideToggle设置？

Answer 1

这是我写的一个模块，用于帮助解决在调整大小时触发javascript的问题，并帮助解决大小问题：

jQuery(function($){

    //resize window events

    //store the reference outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowSize = $window.width();

        return windowSize;
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    //remove console.log from production version
    $(window).resize(function(){
        console.log('checkWidth: ', checkWidth() + 'px' );
        if(checkWidth() >= [yourDesiredWidth]){
            //do something
        }
    });

});

slideToggle覆盖媒体查询

1 个答案: