响应式设计和点击事件

Question

我有一个移动菜单按钮（只能通过 display:block 使用媒体查询查看）。单击该按钮时，会出现我的主 "mobile" 菜单 - 我使用简单的 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>

这里有一些样式....您会看到移动菜单（这是实际的菜单）和移动菜单-但（这是按钮）被隐藏（display:none).当浏览器window减少时，按钮出现（在媒体查询中有display:block），但菜单仍然隐藏。然后，当您单击 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; } }

Answer 1

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

现代浏览器提供 .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; } }

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

Answer 2

与其使用 e.style.display 添加和删除内联样式，不如使用

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

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

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

标签可以在任何地方，重要的是 "hidden" 复选框紧接在它影响的元素之前。这可以使更改 CSS 中的行为方式变得容易得多，而且即使用户已禁用 JavaScript，它也能正常工作 ;)

响应式设计和点击事件

Responsive Design and onclick events

javascript

css

responsive-design

media-queries

inline-styles