Question

I want use JS to make some adjustments to the CSS when the navigation dropdown in Twitter Bootsrap has finished it’s operation. ( ie when it’s fully down, fully up, or one of the sub menu operations finishes ).

What I want to do is not particularly relevant I think, but it’s basically just to do with changing the height of a background div to match the height of the dropdown.

I have looked at the bootstrap collapse jquery but it’s really too complex for me to figure out. Can anyone tell me what I should be hooking into of if there’s an easier way of achieving this.

Here is the relevant code: What I want to do is to have something fire when this dropdown is fully extended

<div class="navbar">
<div class="navbar-inner">
<div class="container">

<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>

<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<nav >
<ul class="nav">
    <li ><a href="#">Home</a></li>
    <li ><a href="#">About</a></li>
    <li ><a href="#">Pages</a></li>
    <li >Pages</a>
    <ul class="sub-menu">
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
    </ul>
    </li>
</ul>

</div>
</div>
</div>

Answer 1

You’ll want to look at the boostrap.js file under the “DROPDOWN CLASS DEFINITION” section of the code.

In looking at the code, something like this should get you started.

$("a.dropdown-toggle").on('click.dropdown.data-api','', function(r) { 
      console.log(r) 
})

From the code in bootstrap.js, this will fire when the drop down is hidden.

$('html').on('click.dropdown.data-api', function () { 
   ///... 
})

If you’re looking for the collapse stuff, then you’ll want to look at the “COLLAPSIBLE DATA-API” selection.