javascript - Bootstrap navbar dropdown-toggle with link on mobile -
i'm dealing problem bootstrap navbar, have multiple dropdowns need actual dropdown-toggles links aswell, works on desktop, there problem on mobile, there no hover im using show dropdown.
for example basic menu:
<!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="link_to_somewhere" class="dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li class="divider"></li> <li><a href="#">separated link</a></li> <li class="divider"></li> <li><a href="#">one more separated link</a></li> </ul> </li> <li><a href="#">link</a></li> </ul> </div><!-- /.navbar-collapse --> i controlling hover dropdown jquery. want have dropdowns shown on mobile automatically, can click of links.
i used solution described here on stackoverflow
problem 1 if have link or dropdown under first one, second 1 overlays dropdown menu above can't click it.
look @ jsfiddle
when navbar collapsed, open , try hover on dropdown menu, can see link underneath highlighted instead. reasone bottom link element gets expanded, , can't rid of it.
any appreciated.
Comments
Post a Comment