调整屏幕时菜单高度不会重置

我正在做响应式设计，其中菜单被宽度为< = 768px的菜单按钮替换;调整屏幕时菜单高度不会重置

目前我使用jQuery来改变菜单的高度，当我点击菜单按钮。
jQuery将style="height: 152px;"添加到nav元素，CSS3 transition: height 0.35s ease 0s;确保它滑落下来。

这工作正常，直到我调整窗口，而菜单是可见的。当width > 768px时，菜单项相互浮动（所以它们在一行而不是在彼此之下）。

问题是菜单高度仍然是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>

来源

2013-10-09 Steven

你应该尝试复制在拨弄你的问题。有时，我们很难仅根据您的描述来想象您的问题。 – Terry

小提琴添加:) – Steven

不要设置高度为内嵌样式 - 增加一类，而不是jQuery的定义目标高度，使该类只适用于内max-width: 768px媒体查询 - 那么一旦媒体查询不再适用，高度也不会再设置为固定值。

来源

2013-10-09 16:58:07 CBroe

我试过了，但后来'过渡：高度'不工作:( – Steven

我假设你正在寻找的行为是菜单，当视口变大并且高度由浏览器自动计算时，它自己变形。您只需听窗口resize事件，并决定做什么，如果屏幕尺寸变比你所设定的阈值（我看你所需的阈值是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 
     }); 
    } 
});

来源

2013-10-09 17:57:07 Terry

调整屏幕时菜单高度不会重置

回答

相关问题