Trigger jQuery on Bootstrap dropdown toggle

Question

I made a bootply that won't generate a link, so here's my settings that I threw in there.

I want to have jQuery add a class to another div when this dropdown is triggered, and remove the class when the dropdown is hidden.

CSS:

.halfOpacity
  {
    opacity: .5;
  }
#switchMenu
  {
    top: 100px;
  }
#siteData
  {
    color: #FFF;
    background-color: #000;
  }

Javascript:

$('#switchDropdown').on('show.bs.dropdown', function(){
  $('#siteData').addClass('halfOpacity');
});
$('#switchDropdown').on('hide.bs.dropdown', function(){
  $('#siteData').removeClass('halfOpacity');
});

HTML:

<a href="#" class="navbar-brand dropdown-toggle mobile-footer-brand" data-toggle="dropdown" id='switchDropdown'>Test Link</a>

<ul class='dropdown-menu' id='switchMenu'>
  <li>HORRAY!!!!</li>
</ul>

<div id='siteData'>Some Stuff<br>Moar stuff<br>Even moar stuffs</div>

Right now the jQuery never gets called based off of the actions that Bootstrap says happen.

Andrew · Accepted Answer · 2014-08-18 22:40:27Z

1

Answered my own question with reading documentation more clearly.

Events

All dropdown events are fired at the .dropdown-menu's parent element.

Bootstrap Documentation Here

The following changes fixed it for me:

Javascript:

$('#wrap').on('show.bs.dropdown', function(){
  $('#siteData').addClass('halfOpacity');
});
$('#wrap').on('hide.bs.dropdown', function(){
  $('#siteData').removeClass('halfOpacity');
});

HTML:

<div id='wrap'>
<a href="#" class="navbar-brand dropdown-toggle mobile-footer-brand" data-toggle="dropdown" id='switchDropdown'>Test Link</a>

<ul class='dropdown-menu' id='switchMenu'>
  <li>HORRAY!!!!</li>
</ul>
</div>
<div id='siteData'>Some Stuff<br>Moar stuff<br>Even moar stuffs</div>

edited Aug 18, 2014 at 22:40

answered Aug 18, 2014 at 22:02

Andrew

4,4525 gold badges36 silver badges75 bronze badges

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

Collectives™ on Stack Overflow

Trigger jQuery on Bootstrap dropdown toggle

1 Answer 1

Events

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Events

Comments

Your Answer

Sign up or log in

Post as a guest

Related