CODEWITHSUNDEEP
twitter-bootstrap
Alex
Alex

Reputation: 996

Bootstrap dropdown('toggle') method doesn't work

I want to toggle a bootstrap dropdown with dropdown('toggle') method but it does not toggle the drop down (open on first click but doesn't close when clicked again). I want to do it only through dropdown('toggle') method. I am using the following code:

JavaScript-

$(function(){
    $(".dropdown-toggle").click(function(){
        $(this).dropdown('toggle');
    });
});

HTML-

<div class="dropdown">
    <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something here</a></li>
    </ul>   
</div>

It would be great if you tell me about any example on, how to enable multiple drop down in a navbar manually using JavaScript.

fiddle of code at: http://jsfiddle.net/alaxmenon/HNL3c/

Upvotes: 2

Views: 9210

Answers (5)

verybadbug
verybadbug

Reputation: 929

You'd remove data-toggle="dropdown" from <a> (if it still there)

$(function() {
  $('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('open');
  });
});

Upvotes: 1

RoToRa
RoToRa

Reputation: 38390

$(function(){
    $(".dropdown-toggle").click(function(e){
        $(this).dropdown('toggle');
        return false;
    });
});

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362290

If you do not want to use the data attributes you just need to do this:

$('.dropdown-toggle').click(function(){
  $(this).next(".dropdown-menu").toggle();
});

dropdown('toggle') won't work unless you use data attributes.

Bootply: http://www.bootply.com/67728

Upvotes: 4

Mohammad Arshi
Mohammad Arshi

Reputation: 386

Use bootstrap-dropdown.js , you dont need to write any extra js for toggling the dropdown.

Upvotes: -1

Jay Shukla
Jay Shukla

Reputation: 5826

Replace href="#" with href="javascript:void(0);"

Upvotes: -1

Related Questions