Dropdown Events - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Dropdown

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Dropdown

Introduction

These are the standard Bootstrap events to enhance the dropdown functionality.

You can use the event.relatedTarget to target the toggling anchor element.

Event Description
show.bs.dropdown fires when the show instance method is called.
shown.bs.dropdown fired when the dropdown has been made visible to the user.
hide.bs.dropdown fired when the hide instance method has been called.
hidden.bs.dropdown fired when the dropdown has finished being hidden from the user.

The following example displays the text content of dropdown link when the users click on it.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Dropdown Events</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
    $(".dropdown").on("show.bs.dropdown", function(e){
        var linkText = $(e.relatedTarget).text(); // Get the link text
        console.log("Click on OK button to view the dropdown menu for - " + linkText);
    });<!--from w ww  .  j av a2s.  co m-->
});
</script>
  <style type="text/css">

</style>
 </head>
 <body>
  <div>
   <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">HTML</a></li>
    <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Drafts</a></li>
      <li><a href="#">Sent Items</a></li>
      <li class="divider"></li>
      <li><a href="#">Trash</a></li>
     </ul> </li>
    <li class="dropdown pull-right"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li class="divider"></li>
      <li><a href="#">Settings</a></li>
     </ul> </li>
   </ul>
  </div>
 </body>
</html>

Related Tutorials