jquery - 调整屏幕大小时菜单高度不会重置

Question

我正在做响应式设计，当宽度 <= 768px 时菜单被替换为菜单按钮；

目前我正在使用 jQuery 在单击菜单按钮时更改菜单的高度。
jQuery 添加 style="height: 152px;" 到 nav 元素和 CSS3 transition: height 0.35s ease 0s; 确保它优雅地滑落。

在菜单可见时调整窗口大小之前，这一切正常。当 width > 768px 时，菜单项彼此相邻 float (因此它们在一行而不是彼此下方)。

问题是菜单高度仍然是 152px 高，导致菜单下方出现空白。

我试着看看是否有一个监听器可以检测菜单按钮是否被隐藏 (display: none;) 以便我可以删除 style ，但我还没有找到任何东西。

我的问题有简单的解决方案吗？任何帮助表示赞赏。

Here is my fiddle

// CSS
.nav-collapse {
  overflow: hidden;
  transition: height 0.35s ease 0s;
}

@media (max-width: 768px){
  .collapse { height:0; }
}

// JS
  $('.btn-navbar').click(function(){
    var nav = $('.nav-collapse');

    if($(nav).hasClass('collapse')){
      $(nav).height($(nav).find('ul').height());
      $(nav).removeClass('collapse');
    } else {
      $(nav).attr('style','');
      $(nav).addClass('collapse');
    }
  });

// HTML
<nav class="nav-collapse collapse">
  <ul>
    <li> menu items </li>
  </ul>
</nav>

Answer 1

我假设您正在寻找的行为是当视口(viewport)变大时自动展开的菜单，以及浏览器自动计算的高度。您只需监听窗口调整大小事件，并确定如果屏幕尺寸大于您设置的阈值(我在您的 fiddle 中看到您想要的阈值是 600px)时要做什么:

$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > 600) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});

由于我们在这里也引用了 $nav 变量，我建议您将声明移到更高的位置，例如 my fiddle :

var $nav = $('.nav-collapse'), // I recommend using $var for objects, so you don't get confused with general variables
    $w = $(window),            // The $(window) object
    threshold = 600;           // You can change this to a pixel value that you want

// Listen to click event
$('.btn-navbar').click(function () {

    // NOTE: I have taken the liberty to change your $(nav) to $nav for consistency
    if ($nav.hasClass('collapse')) {
        $nav.height($nav.find('ul').height()); // If removed, transition does not work.
        $nav.removeClass('collapse');
    } else {
        $nav.attr('style', ''); // If removed, transition does not work.
        $nav.addClass('collapse');
    }
});

// Listen to resize event
$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > threshold) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});