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

Question

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

Cristian · Accepted Answer · 2014-01-17 09:54:15Z

1

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?

answered Jan 17, 2014 at 9:54

Cristian

6,0956 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karthick Kumar · Accepted Answer · 2014-01-17 09:27:02Z

0

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/

answered Jan 17, 2014 at 9:27

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

3 Comments

Cristian Over a year ago

Thanks for the workaround. This should though work out of the box with Bootstrap (github.com/twbs/bootstrap/blob/v3.0.3/js/dropdown.js#L149). It also messes up if you have more than one dropdown (as $(".dropdown-menu").toggle("slow"); targets all off your dropdowns so they randomly toggle when you click outside)

Karthick Kumar Over a year ago

instead of using class as selector ,please try with id like this jsfiddle.net/hg2T6/6

Cristian Over a year ago

No, sorry that means I have to duplicate the code for each dropdown. It's not flexible, it's not proper code! I managed to solve by not using any javascript, see my answer.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related