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.
-
@lois6b ahora espero que estemos como corresponde, solo quiero sumar puntos, espero sirva. saludos y gracias– Marcelo Muñoz RodriguezCommented 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– lois6bCommented el 13 feb. 2018 a las 14:58
Añade un comentario
|
1 respuesta
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(); }