响应式设计和点击事件答案

【问题标题】：Responsive Design and onclick events响应式设计和点击事件
【发布时间】：2015-07-23 23:43:15
【问题描述】：

我有一个移动菜单按钮（只能通过 display:block 使用媒体查询查看）。单击该按钮时，会出现我的主“移动”菜单 - 我使用简单的 javascript 代码来执行此操作（见下文）。

问题...如果我单击按钮展开菜单（将内联样式从 display:none 更改为 display:block），然后增加浏览器大小...我的菜单不再消失。因此，内联样式无法识别媒体查询...

下面是扩展我的菜单的脚本...

<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

这里有一些样式......您会看到 menu-mobile（这是实际的菜单）和 mobile-menu-but（这是按钮）是隐藏的（带有 display:none）。当浏览器窗口缩小时，按钮出现（在媒体查询中显示：块），但菜单仍然隐藏。然后，当您单击 javascript 按钮时，将添加内联样式 display:block 以设置为移动菜单。

#mobile-menu-but, #menu-mobile { display:none; } 
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }

@media (max-width: 790px) { 
  /* Switch to Mobile Menu when too long */
  #menu { display:none; } /* Hide Main Menu  */
  #mobile-menu-but { display:block; float:right; margin:0 20px 0 0; height:50px; padding:5px 0; } 
   #mobile-menu-but a { float:right; }
    .menu-txt { margin:10px 10px 0 0; float:right; }

    #menu-mobile { width:100%; background-color:#000; text-transform:uppercase; 
            font-size:16px; font-family:"AvantGarde", "Helvetica Neue", Arial, Helvetica, sans-serif; } }

【问题讨论】：

内联样式确实与媒体查询无关。媒体查询根据查询条件说明样式表的哪一部分适用。直接应用于元素的样式总是会覆盖样式表中的内容（!important 除外，这通常是做错事的标志）。
我认为您可以将#menu { display:none; } 移出媒体查询...

标签： javascript css responsive-design media-queries inline-styles

【解决方案1】：

您可以添加和删除类值来更改元素外观，而不是直接操作元素样式。类的规则可能会受到媒体查询的影响，因为它们会直接进入样式表。

现代浏览器提供.classList API：

function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.classList.contains("showing"))
      e.classList.remove("showing");
    else
      e.classList.add("showing");
}

现在，在您的 CSS 中，您可以：

  #menu { display: none; }
  #menu.showing { display: block; }

如果你只想在屏幕大的时候显示菜单，在上面的那几行之后添加这个：

  @media screen and (max-width: 700px) { /* or whatever size you want */
    #menu.showing { display: none; }
  }

（在媒体查询中还有其他安排规则的策略，具体取决于您要执行的操作。

【讨论】：

这听起来像是一个有趣的解决方案...我将看看更改 javascript 以进行类替换，而不是内联样式...
想了想……但是当我看的时候，有一些问题。如果 CLASS1 设置为 display:block 并且 CLASS2 设置为 display:none，那么按钮将切换每个类，导致菜单出现和消失（太棒了！）。但是，如果菜单在 CLASS1 中可见，然后页面尺寸减小……因为 CLASS1 是 display:block，它将保持可见。这是我想要避免的。
完美。我很怀疑，但尝试了一下。有效。当你第一次提到它时，我正在考虑简单的类替换，我发现它存在问题。但是，您添加/删除单个类的方式有效。谢谢！
我很高兴能够提供帮助。这有各种细微的变化！祝你好运！

【解决方案2】：

不要使用 e.style.display 添加和删除内联样式，而是使用

var e = document.getElementById("someID");
e.className = "someClass";

您遇到的问题是您的内联样式覆盖了您的 CSS。内联样式将始终具有此优先级（除非 !important 我猜 - 不确定）。

【讨论】：

【解决方案3】：

您可以使用以下技巧来完全避免使用 JavaScript：

#menu {display:none}
#secret_checkbox {position: absolute; left:-9999px}
#secret_checkbox:checked + #menu {display: block}

<label for="secret_checkbox">Click to open/close menu</label>

<input type="checkbox" id="secret_checkbox" />
<div id="menu">Hello!</div>

标签可以在任何地方，重要的是“隐藏”复选框位于它影响的元素之前。这可以使更改 CSS 中的行为方式变得更加容易，而且即使用户禁用了 JavaScript，它也具有工作的额外好处;)

【讨论】：