浏览器卡在媒体查询上了

Question

我创建了一个fiddle 链接 来阐述问题：

我有个桌面和移动端菜单，手机屏幕宽度小于或等于480px时会激活移动端菜单。如果您打开fiddle，调整窗口大小直到汉堡图标出现，点击“运行”，然后点击汉堡菜单中的任何链接，菜单将像应该一样折叠。

如果您将窗口大小重新调整回到全屏状态，则由于在ul元素上设置了display:none的媒体查询，因此菜单文本将消失。这是为了让菜单不在移动模式下永久显示。

这里是否需要注意什么？浏览器不应检测是否已回到全屏状态，从而忽略媒体查询并将ul元素恢复为默认的display:inline吗？

这也会发生在纵向和横向之间的较小设备上，这真的是我的关注点。

当然，任何帮助都将不胜感激。

更新

我在这里创建了一个新的fiddle 链接，它几乎可以正常工作，但仍存在一个问题：调整回全屏后，单击链接（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");
  });
}
});

- user8331128

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


}
});

- Jainam

---

当移动模式下菜单关闭时，扩展窗口，链接不可用。 - Chandra Shekhar

谢谢，没错那个方案可行，但是菜单需要在点击链接时像我最初的fiddle中一样折叠。而且在你的fiddle中，如果你打开和关闭移动菜单而不点击任何链接，然后将其调整大小到满宽度，文本仍然消失了。 - user8331128

Answer 2

slideToggle() 方法正在创建问题。根据 jQuery 文档，slideToggle() 方法会动画化元素的高度属性。当 height 在隐藏动画后达到 0 时，display 样式属性将被设置为 none。

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

试试这个 Fiddle

JS

$(document).ready(function (){

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

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

});

参考链接

这里我只是用window.resize函数来展示给你看。据我所知，没有必要使用该函数。

希望这可以帮到你。

- Chandra Shekhar

---

你已经接近成功了，除了菜单需要在点击任何链接时折叠，就像我的原始fiddle一样。 - user8331128

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>

- vicky patel