1

Estoy intentando añadir un menú desplegable dentro de otro utilizando Bootstrap pero al seleccionar el segundo cierra el menú directamente.

Template

<li><a href="" id="dropdownMenuConfiguacion" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Configuracion <span class="caret"></span></a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuConfiguracion">
      <ul class="nav navbar-nav">
          <li><a href="" id="dropdownMenuUsuarios" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Usuarios <span class="caret"></span></a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuUsuarios">
                 <ul class="nav navbar-nav">
                    <li><a href="{% url 'usuarios' %}" title="Gestión de Usuarios">Todos</a></li>
                    <li><a href="{% url 'usuarios' %}" title="Gestión de Usuarios">Solicitudes boutique</a></li>
                 </ul>
              </div>
           </li>                 
      </ul>
    </div>
</li>
2

2 respuestas 2

2

[Twitter Bootstrap v3]

Para crear un menú desplegable de nivel n con Twitter Bootstrap v3,

CSS:

.dropdown-menu>li /* Para evitar la selección de texto */
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Las reglas a continuación no están implementadas en los navegadores todavía */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu 
{
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after,.left-caret:after
 {  content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.right-caret:after
{   border-left: 5px solid #ffaf46;
}
.left-caret:after
{   border-right: 5px solid #ffaf46;
}

JQuery:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});

HTML:

<div class="dropdown" style="position:relative">
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Aquí <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li>
            <a class="trigger right-caret">Level 1</a>
            <ul class="dropdown-menu sub-menu">
                <li><a href="#">Level 2</a></li>
                <li>
                    <a class="trigger right-caret">Level 2</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li>
                            <a class="trigger right-caret">Level 3</a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>

El Resultado seria el siguiente:

introducir la descripción de la imagen aquí

Fuente SO: [Twitter Bootstrap v3]

Tal ves te sirve de ayuda, Saludos.

2
  • muy buena respuesta, gracias.
    – F Delgado
    Commented el 30 abr. 2018 a las 6:58
  • @FDelgado considere votar a favor si le ha sido de ayuda. Commented el 1 may. 2018 a las 12:15
0

CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

HTML:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  
  <li class="dropdown dropdown-submenu">
                        <a className="dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        nivel 1.1
                      </a>
                      <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#">nivel 2</a>
                      <a class="dropdown-item" href="#">nivel 2</a>
                      <a class="dropdown-item" href="#">nivel 2</a>
                      </div>
                        </li>


                        <li class="dropdown dropdown-submenu">
                        <a className="dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        nivel 1.2
                      </a>
                      <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="#">nivel 2.2</a>
                      <a class="dropdown-item" href="#">nivel 2.2</a>
                      </div>
                        </li>
  </div>
</div>

RESULTADO:introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.