Comment changer la couleur d'arrière-plan de la liste déroulante de bootstrap ouverte

Piotr Ciszewski

Comment changer la couleur d'arrière-plan, disons au rouge de l'option de liste déroulante d'amorçage ouverte. Voici le code:

    <nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Something</a></li>
          <li><a href="#">Another something</a></li>
        </ul>
      </li>          
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

et css:

    .navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Ce que je veux faire, c'est lorsque vous cliquez sur le bouton (par exemple FEMME), cela changera la couleur du texte en rouge et l'arrière-plan de l'option principale (FEMME) en vert et restera ainsi jusqu'à ce que je bascule, clique ou choisisse une autre option ( MEN) du menu principal

Merci

Voici jsfiddle

Jinu Kurian

J'espère que c'est ce que tu veux. Lorsque vous cliquez sur a dropdown, une classe appelée .openest ajoutée au dropdown, donc avec l'aide de cela, vous pouvez la styliser.

Ajoutez simplement ce code

ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}


.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
ul.nav.navbar-nav .dropdown.open .dropdown-toggle{
  color: red;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-default" role="navigation">
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">WOMEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEN<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Something</a></li>
              <li><a href="#">Another something</a></li>
            </ul>
          </li>          
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>

Articles connexes

changer la couleur d'arrière-plan de la liste déroulante

rimi J'édite un site Web écrit par un ancien employé qui n'est plus dans l'entreprise, on me demande d'ajouter une liste déroulante sur le site Web. L'ajout d'une liste déroulante est très simple, mais la couleur d'arrière-plan de cette liste déroulante est to

Comment changer la couleur d'arrière-plan de la colonne bootstrap

déglumesh Je veux changer la couleur d'arrière-plan d'une colonne dans la ligne bootstrap. Il y aura également du rembourrage à l'intérieur de la rangée. Veuillez vous référer à la capture d'écran ci-dessous de l'exigence. <div class="container event-detai