Jquery 滑动切换和响应宽度变化

这个问题在几年前已经被提过很多次了。我基本上是在问，是否有一种更现代的“更干净”的方法来处理这个问题

当屏幕很小时，我使用按钮上的滑动切换来显示和隐藏菜单div。但是，样式是内联添加的

不点击按钮

<div class="nav">...</div>

切换按钮一次

<div class="nav" style="display: block;">...</div>

切换按钮两次

<div class="nav" style="display: none;">...</div>

因此，这会导致这样一种情况：在两次切换按钮后，显示的串联样式：div上没有保留任何内容。因此，如果我随后更改屏幕宽度，使按钮消失，菜单在应该可见时仍然隐藏

---

有没有一种干净的方法来处理这个问题？

如评论中所述，您可以停止使用slideToggle，而改用toggleClass

在这里，我模拟了结合最大高度和过渡的滑动切换效果：

$'按钮'。单击'按钮'，函数{ $'.test'.toggleClass'Showed'； }; .测试{ 最大高度：0； 溢出：隐藏； 过渡：全部5秒； 背景颜色：蓝色； 高度：200px； } .显示{ 最大高度：200px； }

---

切换 您可以使用引导库切换选项和更多功能。

---

您可以在这里看到示例，

jQuery解决方案，它不需要在预定义的屏幕宽度上刷新

$(document).ready(function() {
    $('#navbar-toggle').click(function() {
        // Toggle navbar button animation
        $(this).toggleClass('active');

        // Toggle navbar menu
        $('.site-nav-container').slideToggle(500, function() {
            if ($(this).css('display') == 'none') {
                // Remove inline class
                $(this).css('display', '');
            }
        });
    });
});

---

今天遇到这种情况，我使用$window.resize事件修复了它。我的情况与你的情况类似：我有一个jQuery函数，可以滑动切换包含菜单的ul，但当我的导航被关闭，并且我将窗口大小调整回桌面大小时，我再也看不到导航栏了，因为我有内嵌样式style=display:block

所以，我的解决方案是监听窗口大小，并检查ul是否被隐藏。我的ul有一个名为nav的类，我的断点是667px

$(window).resize(function () {
    if ($(this).width() > 667 && $(".nav").is(":hidden")) {
        $(".nav").removeAttr("style");
    }
});

---

将滑动切换代码替换为以下代码：

var sel = $('.nav');
if(sel[0].style.display === 'block') {
            sel[0].style.display = 'none';
            sel[0].style.display = '';
        } else {
            sel[0].style.display = 'block';
        } 

---

您可以停止使用slideToggle，而是将toggleClass与预定义类一起使用。这样你就可以准确地控制正在发生的事情。我将很快发布一个带有工作示例的答案。或者，您可以添加媒体查询，为小屏幕和非小屏幕两种情况添加单独的样式……有什么问题？您的示例没有考虑屏幕大小。