元素在特定寬度的視口上不會slideDown（）

Question

我正在嘗試實現類似於https://www.gucci.com/的頁腳，在768px以下它成為手風琴，而在768px及以上則成為普通的塊網格。

我的問題是，每次我將手風琴切換到768px以下，然后將其重新設置為768px以上時，元素都不會向下滑動或顯示，它只會保持折疊或隱藏。

下面是我的代碼

 $(document).on('click','.footer-toggle', function(e){ if ($(window).width() < 768) { if($(this).hasClass("opened")) { $(this).removeClass("opened"); $(this).next(".toggled-content").slideUp("fast"); } else { $(".footer-toggle").removeClass("opened"); $(".toggled-content").slideUp("fast"); $(this).addClass("opened"); $(this).next(".toggled-content").slideDown("fast"); } } e.preventDefault(); }); if ($(window).width() >= 768) { $('.toggle-content').slideDown("fast"); } 

 .toggle-content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="footer-toggle">TITLE 1</a> <div class="toggle-content"> <ul> <li><a href="">NAV A</a></li> <li><a href="">NAV B</a></li> <li><a href="">NAV C</a></li> <li><a href="">NAV D</a></li> </ul> </div> 

非常感謝您的幫助，謝謝。

Answer 1

您的代碼僅需進行幾次更改即可使用。 這是我的建議：

1. 清理您在jQuery選擇器中對類名的引用（即，其中“ toggle-content”類被稱為“ toggled-content”）。

2. 刪除這兩行就在您else塊內。

    $(".footer-toggle").removeClass("opened"); $(".toggled-content").slideUp("fast"); 

在這種情況下，這些選項對您不利，您希望菜單向下滑動，但是您的代碼首先告訴它向上滑動。