I've got a bootstrap 3 drop down and it should close when the user is clicking on the same link again.
Here's my html:
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung</li>
<li class="menu-geselle">Geselle</li>
<li class="menu-meister">Meister</li>
</ul>
</li>
If I click on the a.dropdown-toggle the drop down opens - which is correct. If I click the same link again, the drop down doesn't close.
Can anybody help me with that?
I couldn't find something on SO or anywhere else.
Thanks.
Use this code. It will give you desired result.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Karriere
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Ausbildung</li>
<li>Geselle</li>
<li>Meister</li>
</ul>
</div>
You have data-target="#" which prevents it closing:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown menu-karriere">
<a class="dropdown-toggle" data-toggle="dropdown" href="asd">
Karriere <b class="caret"></b>
</a>
<ul class="dropdown-menu" data-lvl="0">
<li class="menu-ausbildung">Ausbildung
</li>
<li class="menu-geselle">Geselle
</li>
<li class="menu-meister">Meister
</li>
</ul>
</li>
Related
i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>
How do I make two buttons appear underneath each other in a dropdown menu of Javascript? This is the code that I tried but they appear next to each other:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-pencil"></i> Registeration Menu <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<a id="btn-register" href="#">User</a>
<a id="btn-registerAdmin" href="#">Admin</a>
</ul>
</li>
<li>
Login
</li>
</ul>
<li><a id="btn-register" href="#">User</a></li>
<li><a id="btn-registerAdmin" href="#">Admin</a></li>
Add <li> tags.
In a tag bootstrap datatoggle and href="#home" is notwoking ....how to implement it
<li class="dropdown">Oculistica Venturino <i class="fa-caret-down"></i>
</li>
http://responsive-ui.com/babys9/
Do you have a Code pen account? Working on this side. Try this link.
http://codepen.io/dfrierson2/pen/RNoWZe
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown trigger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Oculistica Venturino</li>
</ul>
</div>
Hi this should work according to bootstrap's documentation you should use a element or, if using a more generic element such as a , add a role="navigation".
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown trigger <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Oculistica Venturino</li>
</ul>
</div>
I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
I have a two drop down list using twitter bootstrap, but I have a small problem .. when choosing the menu , the sub items appears , bu then in the next time don't .
Html code :
<ul class="nav nav-pills left">
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" style="color:#fff;" data-toggle="dropdown" href="#menu1"><i class="icon icon-user icon-white">
</i> My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Previouse Report</li>
<li>My Profile</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="lbtnLogout" runat="server" CausesValidation="false" ForeColor="Black">Log out</asp:LinkButton></li>
</ul>
</li>
<li class="dropdown active" id="menu2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"><span class="badge-notification badge badge-error">
<asp:Label ID="lblMsgCount" CssClass="lblMsgCount" runat="server" Text=".."></asp:Label></span>
<i class="icon icon-envelope icon-white">
</i> Notificatons <span class="caret"></span></a>
<ul ID="divNewNotifications" class="dropdown-menu">
</ul>
</li>
</ul>
JavaScript code :
$('.dropdown-toggle').dropdown();
and included the required lib.
<script src="../bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
Here is the code on http://jsfiddle.net/zNVgq/2/