瀏覽器卡在媒體查詢上

Question

我在這里創建了一個小提琴來說明這個問題：

我有一個桌面和移動菜單，移動設備激活480px或更低，如果您打開小提琴，調整大小窗口，直到出現漢堡包圖標，單擊運行，單擊漢堡包，然后單擊任何鏈接。 菜單會崩潰。

如果您然后將窗口調整回全寬度，則菜單文本將丟失，因為480px媒體查詢在ul元素上顯示：none，以便菜單不會在移動模式下永久顯示。

我在這里錯過了什么嗎？ 如果瀏覽器沒有檢測到它返回到全寬，因此忽略媒體查詢並恢復為默認顯示：內聯ul元素？

這也發生在肖像和橫向模式之間的較小設備上，這是我真正關心的問題。

任何幫助，當然，贊賞。

UPDATE

我有一個新的小提琴這里這是近正常工作，剩下的一個問題是，在調整大小回鏈路（UL）全寬點擊導致向上滑動菜單，但是這應該只發生低於480像素。 再次任何幫助將不勝感激。

感謝Chandra Shekhar在這個更新過的小提琴中使用的一些腳本。

<nav>
<a class="fa fa-bars"></a>
<ul class="menu">
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>

nav {
width:100%;
position:fixed;
top:0;
text-align:center;
z-index:100;
background:grey;
padding:10px 0;
}

nav ul {
list-style:none;
margin:0;
padding:0;
}

nav ul li {
display:inline;
padding:0 12px;
}

.fa-bars {
display:none;
}

@media only screen and (max-width:480px) {
nav ul {
width:100%; 
position:absolute;
top:37px;
display:none;
}

nav ul li { 
display:block;  
border-top:1px solid #868686;
background:grey;
padding:10px;
}

nav ul li a {
padding:12px 18px;
}

nav ul li:first-child {
border-top:none;
}

.fa-bars {
display:inline;
}

$(document).ready(function () {
   if ( $(window).width() > 480) {} 
   else {
   $(".fa-bars").click(function (event) {
    event.stopPropagation();
    $(".menu").slideToggle("slow");
  });

  $(document).click(function () {
    $(".menu").slideUp("slow");
  });
}
});

Answer 1

您只能在js下面添加：

你已經使用了slidetoggle，然后不需要slideUp。

請參閱小提琴演示

JS：

$(document).ready(function () {
   if ( $(window).width() > 480) {} 
   else {
   $(".fa-bars").click(function (event) {
    event.stopPropagation();
    $(".menu").slideToggle("slow");
  });


}
});

Answer 2

slideToggle()方法正在創建問題。 根據jQuery文檔， slideToggle()方法為元素的height屬性設置動畫。當隱藏動畫后height達到0 ， display樣式屬性設置為none 。

這就是鏈接不可見的原因。

試試這個小提琴吧

JS

$(document).ready(function (){

  $(".fa-bars").on('click',function(){
    $(".menu").slideToggle("slow");
   });

//
  $(window).resize(function(){
    if($(this).width()>480)
    {
        $(".menu").show();
    }
  });

});

鏈接供參考

在這里，我使用了window.resize函數來向您展示。 據我所知，沒有必要使用該功能。

希望這可以幫助

Answer 3

 $(document).ready(function () { if ( $(window).width() > 480) {} else { $(".fa-bars").click(function (event) { event.stopPropagation(); $(".menu").slideToggle("slow"); }); $(document).click(function () { $(".menu").toggle("slow"); }); } }); 

 nav { width:100%; position:fixed; top:0; text-align:center; z-index:100; background:grey; padding:10px 0; } nav ul { list-style:none; margin:0; padding:0; } nav ul li { display:inline; padding:0 12px; } .fa-bars { display:none; } @media only screen and (max-width:480px) { nav ul { width:100%; position:absolute; top:37px; display:none; } nav ul li { display:block; border-top:1px solid #868686; background:grey; padding:10px; } nav ul li a { padding:12px 18px; } nav ul li:first-child { border-top:none; } .fa-bars { display:inline; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <nav> <a class="fa fa-bars"></a> <ul class="menu"> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> </ul> </nav>