Bootstrap Desplegable Hacer flecha Desplegable cambiar de Dirección

Estoy buscando una manera de hacer el mismo menú desplegable de flecha cambiar las direcciones de mirar hacia arriba cuando el menú es cerrado y hacia abajo cuando el menú está abierto.

Bootstrap Desplegable Hacer flecha Desplegable cambiar de Dirección

Este es mi código html:

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

Creo que sería más fácil para hacer en js.

Aquí está mi jsfiddle código: https://jsfiddle.net/Pabi/RxguB/75/

Gracias.

  • Sería grande si usted podría agregar vínculo a jsfiddle. Esto reducirá el tiempo de instalación de un proyecto de bootstrap para responder a su pregunta, y más probabilidades de obtener una respuesta rápida. Gracias
InformationsquelleAutor Pabi | 2015-07-28

3 Kommentare

  1. 3

    Acabo encontrado con el mismo problema. Yo quería hacer el símbolo de intercalación icono de mirar hacia arriba cuando desplegable que se activa y normal (abajo) cuando no lo era. Esta es mi solución:

    <style>
      .caretup {
        transform: rotate(180deg);
      }
    </style>
    <script>
      $(function(){
        $(".dropdown").on("show.bs.dropdown hide.bs.dropdown", function(){
          $(this).find(".caret").toggleClass("caretup");
        });
      });
    </script>

    Que es!

  2. 2

    Prueba este código.

    <!-- Navigation -->
    <nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
      <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
      <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Pandora</a>
        </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
        </ul>
        <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class='caret' id='menu-caret'></b></a>
                <ul class="dropdown-menu">
                  <li><%= link_to "Edit Account", edit_user_registration_path %></li>
                  <li><a href="#">Do Something</a></li>
                  <li class="divider"></li>
                  <li><a href="/signout">Sign Out</a></li>
                </ul>
              </li>
        </ul>
      </div><!-- /.navbar-collapse -->
      </div><!-- container-collapse -->
    </nav>

    y agregar secuencias de comandos

    <script>  
        $('ul.nav li.dropdown').hover(function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeIn();
          $('#menu-caret').addClass('glyphicon glyphicon-chevron-up');
          $('#menu-caret').removeClass('caret');
        }, function() {
          $(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
          $('#menu-caret').addClass('caret');
          $('#menu-caret').removeClass('glyphicon glyphicon-chevron-up');
        }); 
    </script>

    quitar onhover css en ur CSS

    consulte este violín http://jsfiddle.net/7o8sLhgf/

    • compruebe el código correctamente @Pabi . at <li class=»dropdown»> <a href=»#» class=»dropdown-toggle» data-toggle=»dropdown»>Cuenta <b class=»cursor»></b></a>, por lo que añadir el id no funcionará
    • Parece que no trabajo para mí en la flecha desplegable del icono no ha cambiado. Y no cambia cuando se me pase el ratón sobre ella
    • pequeño cambio de uso del símbolo de intercalación de intercalación-up en lugar de glyphicon glyphicon-chevron-up
  3. 0

    Solución usando jQuery y algunos menores de CSS.

    JS:

     $(function() {
       $(".dropdown").hover(
    
         function() {
           $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
           $(this).toggleClass('open');
           $('span', this).toggleClass("caret caret-up");
         },
    
         function() {
           $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
           $(this).toggleClass('open');
           $('span', this).toggleClass("caret caret-up");
         });
     });

    CSS:

    /*TODO Check what makes the hover items dark blue*/
    
    .navbar {
      text-transform: uppercase;
      margin-bottom: 0px;
    }
    .navbar-inverse {
      padding-bottom: 70px;
      padding-top: 70px;
    }
    .navbar-inverse .navbar-nav > li > a {
      color: white;
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 2px;
    }
    .navbar-inverse .navbar-toggle {
      border-color: transparent;
    }
    .navbar-trans {
      background-color: #279ddd;
      color: #fff;
      border-bottom-width: 1px;
      border-color: #fff;
    }
    .navbar-trans li>a:hover,
    .navbar-trans li>a:focus,
    .navbar-trans li.active {
      background-color: #38afef;
    }
    .navbar-trans a {
      color: #fefefe;
    }
    /*Drop down menu styling*/
    
    ul.dropdown-menu {
      background-color: #279ddd;
    }
    ul.dropdown-menu {
      background-color: #279ddd;
    }
    ul.dropdown-menu li a {
      color: white;
    }
    /*Dropdown on Hover*/
    
    .sidebar-nav {
      padding: 9px 0;
    }
    .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      visibility: hidden;
      margin-top: -1px;
    }
    .dropdown-menu li:hover .sub-menu {
      visibility: visible;
    }
    .dropdown:hover .dropdown-menu {
      display: block;
    }
    .nav-tabs .dropdown-menu,
    .nav-pills .dropdown-menu,
    .navbar .dropdown-menu {
      margin-top: 0;
    }
    .navbar .sub-menu:before {
      border-bottom: 7px solid transparent;
      border-left: none;
      border-right: 7px solid rgba(0, 0, 0, 0.2);
      border-top: 7px solid transparent;
      left: -7px;
      top: 10px;
    }
    .navbar .sub-menu:after {
      border-top: 6px solid transparent;
      border-left: none;
      border-right: 6px solid #fff;
      border-bottom: 6px solid transparent;
      left: 10px;
      top: 11px;
      left: -6px;
    }
    .caret-up {
      width: 0;
      height: 0;
      border-left: 4px solid rgba(0, 0, 0, 0);
      border-right: 4px solid rgba(0, 0, 0, 0);
      border-bottom: 4px solid;
      display: inline-block;
      margin-left: 2px;
      vertical-align: middle;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Navigation -->
    <nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
      <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible"> <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
    
          </button> <a class="navbar-brand" href="#">Project Pandora</a>
    
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav"></ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <span class='caret' id='#menu-caret'></span></a>
    
              <ul class="dropdown-menu">
                <li> <a href="#">Do Something</a>
    
                </li>
                <li><a href="#">Do Something</a>
    
                </li>
                <li class="divider"></li>
                <li><a href="/signout">Sign Out</a>
    
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- container-collapse -->
    </nav>

    • Creo que el código #279ddd corresponde a azul oscuro.
    • Es la línea… ul.dropdown-menu { background-color: #279ddd; }
    • También, usted ul.dropdown-menu {background-color: #279ddd;} dos veces

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea