元素在特定宽度的视口上不会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"); 

在这种情况下，这些选项对您不利，您希望菜单向下滑动，但是您的代码首先告诉它向上滑动。