javascript - 我无法分配显示 :none to a toggle button

Question

我正在创建一个菜单可切换的网站。但是当我在宽屏上时，菜单总是显示。我希望它仅在我单击按钮时显示。

在 html 中，这是按钮:

<div class="botonera col-xs-12">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="botonMenu">
       <span class="sr-only">Toggle navigation</span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#productos"><img class="iconoMenu" src="imagen/iconoMenuProductos.png">Productos</a></li>
        <li><a href="#contacto"><img class="iconoMenu" src="imagen/iconoMenuContacto.png">Contacto</a></li>
        <li><a href="#distribuidores"><img class="iconoMenu" src="imagen/iconoMenuDistribuidores.png">Distribuidores</a></li>  
        <li><a href="#cotizacion"><img class="iconoMenu" src="imagen/iconoMenuCotizacion.png">Cotizacion</a></li>                     
        <li><a href="#descargas"><img class="iconoMenu" src="imagen/iconoMenuDemos.png">Descargas</a></li>
        <li><a href="#videos"><img class="iconoMenu" src="imagen/iconoMenuVideos.png">Videos</a></li>
        <li><a href="#nosotros"><img class="iconoMenu" src="imagen/iconoMenuNosotros.png">Nosotros</a></li>
        <li><a href="#faq"><img class="iconoMenu" src="imagen/iconoMenuFaq.png">FAQ</a></li>
    </ul>
</div>

这是CSS:

.navbar-toggle 
{
    display: block !important;
}
.navbar-collapse.collapse 
{
    display: none !important;
}
.navbar-nav>li 
{
    float: none !important;
}
.collapse.in
{
  display:block !important;
}

所以问题是我正在写:

.navbar-collapse.collapse 
{
   display: none !important;
}

但它没有接受它。我也在使用 Bootstrap 。我认为它正在阻止它。如果菜单没有显示，我该如何强制折叠菜单:无

Answer 1

以下是实现您想要的目标的步骤:

1. 从此行中删除 collapsed 类:class="navbar-toggle collapsed" 所以它看起来像这样:class="导航栏切换”

2. 像这样将这个类 navbar-header 添加到你的 botonera div class="navbar-header botonera col-xs-12"

   /li>
3. 按如下方式编辑您的 CSS:

CSS:

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

jsFiddle 链接:https://jsfiddle.net/AndrewL32/8eqdhLwr/1/