Reputation: 6085
I don't want to include bootstrap in my project, but I want to use the dropdown plugin separately. The reason I chose Bootstrap's one because it's a robust and relatively non-complicated one (I just need the basic functionality – to work flawlessly, not any extra features)
I tried to make the dropdown css as close to bootstrap's css as possible, but the menu refuses to hide when I click outside the dropdown.
HTML:
<div id="top_links">
<ul>
<li class="dropdown"> <a href="#">Menu</a>
<ul class="dropdown-menu">
<li> <a href="#">Submenu 1</a>
</li>
<li> <a href="#">Submenu 1</a>
</li>
<li> <a href="#">Submenu 1</a>
</li>
</ul>
</li>
</ul>
</div>
JS (tried both including full bootstrap.js and just bootstrap-dropdown.js plugin):
$('#top_links').find("li.dropdown > a").dropdown()
CSS:
#top_links > ul {
list-style-type: none;
}
#top_links > ul > li {
position: relative;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-left: 28px;
}
#top_links > ul > li:first-child {
margin-left: 0;
}
#top_links > ul > li > a {
display: block;
text-decoration: none;
position: relative;
padding-top: 28px;
}
#top_links > ul > li > a:before {
content:"";
width: 30px;
height: 20px;
position: absolute;
top: 0;
left: 50%;
margin-left: -15px;
}
#top_links > ul > li.dropdown > a {
margin-right: 13px;
}
#top_links > ul > li.dropdown:after {
content:"";
position: absolute;
right: 0;
bottom: 6px;
width: 8px;
height: 6px;
}
#top_links > ul > li > ul {
display: none;
list-style-type: none;
position: absolute;
z-index: 10;
width: auto;
border: 1px solid #edeae6;
background-color: #f6f3ef;
padding: 5px;
margin: 0 -6px 0px -6px;
}
#top_links > ul > li > ul li {
padding: 5px 0;
}
#top_links > ul > li > ul li a {
display: block;
}
#top_links > ul > li > ul li > .icon {
top: 6px !important;
}
#top_links > ul > li.open > ul {
display: block;
}
On JSFiddle: Live DEMO
Upvotes: 0
Views: 932
Reputation: 6085
This seems to work when I don't use the manual trigger, so I removed this line:
$('#top_links').find("li.dropdown > a").dropdown()
And added data-toggle
attribute to the links:
<a href="#" data-toggle="dropdown">Menu</a>
Works now: DEMO
However, do you think this is a bug in Bootstrap? Is it intended to work as I tried it?
Upvotes: 1
Reputation: 2361
Try this
<script>
$(document).ready(function () {
$(".dropdown").on('click', function () {
$(".dropdown-menu").toggle("slow");
});
});
$(".dropdown").on("click", function (event) {
event.stopPropagation();
});
$(document).on("click", function () {
$(".dropdown-menu").toggle("slow");
});
</script>
Demo
Upvotes: 0