0

Tuve un problema que al momento de abrir dropdown en iPad y luego voy a abrir otro, este solo hacía que el que estaba abierto se cerrara y el que quería abrir no se abría al oprimir por primera vez, lo que me obligaba a oprimir dos veces el dropdown.

2
  • @lois6b ahora espero que estemos como corresponde, solo quiero sumar puntos, espero sirva. saludos y gracias Commented el 13 feb. 2018 a las 14:56
  • Sumar puntos es válido, cada uno aporta por sus motivos. Pero las publicaciones serán de mejor aceptación si se busca resolver problemas comúnes. Un saludo
    – lois6b
    Commented el 13 feb. 2018 a las 14:58

1 respuesta 1

0

Encontré la solución solo con css, aquí el ejemplo.

HTML

<div class="btn-group"> <button class="btn btn-default dropdown-toggle tab-menu-link" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button">Otros servicios<span class="glyphicon glyphicon-menu-down"></span></button> <ul class="dropdown-menu"> <li><a class="first" href="javascript:;">Giros</a></li> <li><a href="javascript:;">Equifax</a></li> <li><a href="javascript:;">Pago de cuentas</a></li> <li><a href="javascript:;">Recargas</a></li> </ul> </div>

SCSS

button.btn.btn-default.dropdown-toggle.tab-menu-link {
  &+.dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    top: 80%;
    left: auto;
    right: 0;
    margin-right: -126px;
    max-width: 256px;

    @media (max-width: $md-device ){
      margin-right: -115px;
    }
  }
  &:hover{
    @media (max-width: $md-device){
      .glyphicon.glyphicon-menu-down {
        &:before {
          content: "\e260";
        }
      }
      &+.dropdown-menu {
        left: auto;
        right: 0;
        visibility: visible;
        opacity: 1;
        top: 100%;

        @include media-breakpoint-up(md) {
          right: 0;
        }
      }
      &:after,
      &:hover:after {
        opacity: 0;
        visibility: hidden;
      }
    }
  }
  &[aria-expanded="true"] {
    .glyphicon.glyphicon-menu-down {
      &:before {
        content: "\e260";
      }
    }
    &+.dropdown-menu {
      left: auto;
      right: 0;
      visibility: visible;
      opacity: 1;
      top: 100%;

      @include media-breakpoint-up(md) {
        right: 0;
      }
    }
    &:after,
    &:hover:after {
      opacity: 0;
      visibility: hidden;
    }
  }
}

JS

$(document).ready(function() {
header();
});
function header() {
  $('.dropdown-toggle').dropdown();
}

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.