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

以下是实现目标的步骤：

从此行移除collapsed课程：class="navbar-toggle collapsed"所以它看起来像这样：class="navbar-toggle"
将此课程navbar-header添加到您的botonera div中class="navbar-header botonera col-xs-12"
按如下方式编辑您的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/

Answer 2

我找到了解决方案。你看，我正在写我的CSS

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

我设法抓住这些的方式，只是为了更具体。我是这样做的：

div#navbar.navbar-collapse.collapse 
{
    display: none !important;
}
div#navbar.collapse.in
{
    display:block !important;
}

谢谢你的帮助，我真的很感激！

我无法将display：none指定给切换按钮

2 个答案: