从菜单导航栏更改CSS样式

我有一个引导导航栏，我希望当我点击deploy按钮时，这个CSS（按钮的名称）会改变（我不喜欢CSS按钮的默认值）。所以我想接着说：

• 当我点击菜单（在Xtra小尺寸-作为移动文件-）时，它的CSS样式会改变（例如：背景色：红色）

我怎么能这样做？他的班名是什么？（例如：导航栏按钮[aria expanded=true]）谢谢

编辑：添加了我的导航条形码：

<nav class="navbar navbar-default" role="navigation">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle navbar-collapse-left" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Menú</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                {/*<a class="navbar-brand" href="/inicio"><img id="idFotoLogotipo" width="200px" src="./assets/images/cabecera_CE.jpg"/></a>*/}
                <a class="navbar-brand visible-xs-block" /*href="http://www.upct.es/"*/><span id="idTextoLogotipo">- INCIDENCIAS -</span></a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">
                    <MenuNavItem to='/administrador/inicio' index={true} /*menuItemActive="inicio"*/>Inicio</MenuNavItem>
                    <MenuNavItem to='/administrador/nueva_incidencia' /*menuItemActive="nueva_incidencia"*/>Nueva Incidencia</MenuNavItem>
                    <MenuNavItem to='/administrador/incidencias_recibidas' /*menuItemActive="incidencias_recibidas"*/>Incidencias Recibidas</MenuNavItem>
                    <MenuNavItem to='/administrador/informes' /*menuItemActive="informes"*/>Informes</MenuNavItem>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="divider visible-xs-block"></li>
                    {this.state.logged === true ? <p class="nav navbar-text hidden-xs"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre} ({this.state.dni})</p> : ''} 
                    {this.state.logged === true ? <p class="nav navbar-text visible-xs-block"><span class="glyphicon glyphicon-user"></span> Bienvenido, {this.state.nombre}</p> : ''}
                    {this.state.logged === true ? <li class="salir"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-off"></span> Salir</a></li> : <li class="entrar"><a href="http://www.upct.es/"><span class="glyphicon glyphicon-user"></span> Entrar</a></li>}
                </ul>
            </div>

        </nav>

门努
{/**/}

伊尼西奥
新发病率
累犯发生率
告密者



{this.state.logged==true？：'}
{this.state.logged==true？
Bienvenido，{this.state.nombre}
：'}
{this.state.logged==true？
：
}

如果您指的是此处显示的“汉堡菜单”（三行）下拉切换按钮：

然后，您应该能够通过以下方式实现这一目标：

.navbar-toggle[aria-expanded="true"],
.navbar-toggle[aria-expanded="true"]:focus {
    background-color: red;
}

请注意，

：focus

样式是必需的，否则当单击按钮时，默认的灰色背景颜色仍将显示，因为此时按钮将具有焦点

编辑：试试这个例子-我在样式前面加了

.navbar default

，这应该可以确保样式正常工作

.navbar default.navbar切换[aria expanded=“true”]，
.navbar默认值.navbar切换[aria expanded=“true”]：焦点{
背景色：红色；
}
.navbar default.navbar折叠[aria expanded=“true”]{
背景色：#428bca；
}

切换导航















提交

I删除[aria expanded=“true”]并始终采用红色，而不仅仅是在部署菜单时。我下一步要做的事情是：.navbar default.navbar切换when.navbar collapse.collapse[aria expanded=true]{背景色：#428bca；}。我怎么能做到这一点呢？我不知道这是怎么翻译成CSS语言的。我在问题中添加了导航条形码。我的代码与你的代码相同，但它仍然无法在我身上运行。我不明白…请参见上文-更新演示以将背景色应用于下拉菜单。检查您正在使用哪个版本的引导（我的演示使用最新的3.3.7版本），这样可能会影响它。如果失败，请尝试使用上显示的演示标记作为起点重新创建菜单。