CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menu
Cristian
Cristian

Reputation: 6085

How to make twitter bootstrap dropdown hide when using the JS without CSS?

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

Answers (2)

Cristian
Cristian

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

Karthick Kumar
Karthick Kumar

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

http://jsfiddle.net/hg2T6/2/

Upvotes: 0

Related Questions