I had a problem that when I opened the dropdown on iPad and then I opened another, it only made the open one close and the one I wanted to open did not open when I pressed for the first time, which forced me to press the dropdown twice.
I had a problem that when I opened the dropdown on iPad and then I opened another, it only made the open one close and the one I wanted to open did not open when I pressed for the first time, which forced me to press the dropdown twice.
I found the solution only with css, here's the example.
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();
}