Question

我试图制作在较小屏幕上显示网页时隐藏和显示菜单的按钮。当显示宽度大于640px时，我想保留整个菜单。我只允许使用CSS和JavaScript。

这是我写的JS函数：

var b = document.getElementById ("menu-button");
b.addEventListener("click", showMenu, false);
var i = 0;
function showMenu () {
    i++;
    if(i % 2 == 1)
        document.getElementById("menu").style.display = "block";
    else
        document.getElementById("menu").style.display = "none";
}

在较小的屏幕上显示页面时它正在工作。

当我点击按钮隐藏菜单（更改＆＃34;菜单＆＃34;显示到none）然后增加页面大小时，当屏幕变大时我的菜单不显示比640px。

此媒体媒体查询无法完成此任务：

@media screen and (min-width:640px) {
    #menu {
        display: block;
    }
}

Answer 1

您需要将!important添加到CSS属性中，例如：

 #menu { display:block!important; }

您的Javascript将style属性添加到元素中，该元素具有higher priority，而不是任何内部或外部CSS样式，除非它们“是”!important。

您还可以考虑采取措施避免这种情况，即在Javascript中切换一些CSS类，而不是设置style属性。这样您就可以避免使用!important。

Answer 2

我建议不要像这样设置元素style，建议在元素上切换一个类

旁注，我也从id更改为class，这也是推荐的

此外，specificity是原因，已在评论/答案中指出，为什么您的代码无法运作，更多内容请阅读此处：https://developer.mozilla.org/en/docs/Web/CSS/Specificity

＆＃13;

var b = document.querySelector(".menu-button");
b.addEventListener("click", function(e) {
  document.querySelector(".menu").classList.toggle("show");
});

＆＃13;

.menu {
  display: none;
}
.menu.show {
  display: block;
}


@media screen and (min-width:640px) {
    .menu {
        display: block;
    }
}

＆＃13;

<div class="menu show">Hi, I'm a menu element</div>
<button class="menu-button">Show/Hide</button>

＆＃13;

Answer 3

Connexo已经指出了答案，但扩展对你和将来来到这里的其他人可能会有所帮助。

HTML元素的“样式”可以设置在至少3个位置。如果发生冲突，浏览器必须决定哪个应该赢。使用的规则称为“特异性”。如果你想要更全面的解释，这里有一篇关于这个主题的好文章https://css-tricks.com/specifics-on-css-specificity/。

粗略地说，在最初的HTML'style'属性中定义的任何样式都是最强大的，所以这将赢得CSS文件规则。重要的是，在用例中设置样式，操作HTML样式属性。

因此，您的CSS被代码中的样式属性设置所取代。

对于纯JS解决方案，您可以考虑向窗口onResize事件添加一个监听器。如果您研究这种方法，请注意在某些浏览器中，事件会触发每个像素的大小更改，因此请寻找一个考虑到this one之类的解决方案，否则该函数将被多次触发并可能减少您带给用户的快乐。

Answer 4

正如其他评论建议的那样，您在代码中尝试了不同的东西。我建议使用css解决方案，您可以查看大多数网格用于设置其媒体查询的样式，以便在调整浏览器窗口大小或监视器缩小时显示/隐藏元素。

非常酷，轻量级的网格称为简单网格。

https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css

在第177行，“手持式”设备的媒体查询开始。例如，将其添加到HTML文档中：

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css">
</head>
<body>
<button class="hide-on-mobile">MyButton</button>
</body>

如果浏览器窗口低于767px

，则该按钮将不可见

Answer 5

您需要在css属性中添加！important。因为您的JavaScript代码设置的元素样式属性优先于任何css选择器样式。

根据屏幕大小隐藏和显示元素

5 个答案: