1

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

目前，当我单击菜单按钮时，我正在使用 jQuery 来更改菜单的高度。
jQuery 添加style="height: 152px;"到nav元素中，CSS3transition: height 0.35s ease 0s;确保它优雅地向下滑动。

这工作正常，直到我在菜单可见时调整窗口大小。当 时width > 768px，菜单项彼此相邻浮动（因此它们在一行上而不是彼此下方）。

问题是菜单高度仍然是 152px 高，并导致菜单下方有空白区域。

我试图查看是否有一个侦听器可以检测菜单按钮是否变为隐藏（display: none;），以便我可以删除style，但我还没有找到任何东西。

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

这是我的小提琴

// 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>
4

2 回答 2

1

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

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

由于我们在这里还引用了 $nav 变量，我建议您将声明向上移动，就像在我的小提琴中一样：

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
        });
    }
});
于 2013-10-09T17:57:07.730 回答
0

不要将高度设置为内联样式 - 使用定义目标高度的 jQuery 添加一个类，并使该类仅适用于max-width: 768px媒体查询 - 然后一旦该媒体查询不再适用，高度也将不会再设置为该固定值。

于 2013-10-09T16:58:07.230 回答