Question

我创建了一个小提琴here来说明这个问题：

我有一个桌面和移动菜单，移动设备激活480px或更低，如果您打开小提琴，调整大小窗口，直到出现汉堡包图标，单击运行，单击汉堡包，然后单击任何链接。菜单崩溃了。

如果您随后将窗口调整为全宽，则菜单文本将丢失，因为480px媒体查询在ul元素上显示：none，以便菜单不会在移动模式下永久显示。

我在这里遗漏了什么吗？浏览器是否应检测到它已恢复为全宽，因此忽略媒体查询并恢复为默认显示：内联ul元素？

这也适用于纵向和横向模式之间的较小设备，这是我真正关心的问题。

当然，任何帮助都是值得赞赏的。

更新

我有一个新的小提琴here几乎正常工作，剩下的一个问题是调整大小点击一个链接（ul）会导致菜单向上滑动但这应该只发生在480px以下。再次感谢任何帮助。

感谢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。

请参阅Fiddle Demo

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样式属性设置为{ {1}}。

这就是链接不可见的原因。

试试这个小提琴

JS

none

Link for reference

这里我使用$(document).ready(function (){ $(".fa-bars").on('click',function(){ $(".menu").slideToggle("slow"); }); // $(window).resize(function(){ if($(this).width()>480) { $(".menu").show(); } }); });函数向您展示。据我所知，没有必要使用该功能。

希望这有助于

Answer 3

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

浏览器卡在媒体查询上

3 个答案: