slideToggle覆蓋媒體查詢

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 ，因此可以使用以下slideToggle：

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

    });

除非您使用它來將內容向上滑動，然后再將瀏覽器的大小更改回原來的狀態，否則這將正常工作。 即使較大的瀏覽器媒體查詢將它們display:block在display:block ，這也將所有同級設置為display:none 。

有沒有辦法在瀏覽器擴展后立即忽略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
        }
    });

});