Handle submenu click event

Description

The following code shows how to handle submenu click event.

Example


<!--<!--  w  w  w  . j  ava 2  s .c  o m-->
Code revised from
http://fiddle.jshell.net/2nBm9/
-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-git2.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type='text/css'>
.btn-input {
  display: block;
}

.btn-input .btn.form-control {
  text-align: left;
}

.btn-input .btn.form-control span:first-child {
  left: 10px;
  overflow: hidden;
  position: absolute;
  right: 25px;
}

.btn-input .btn.form-control .caret {
  margin-top: -1px;
  position: absolute;
  right: 10px;
  top: 50%;
}
/* dropdown submenu bootstrap 3 fix */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
   $(document.body).on('click', '.dropdown-menu li', function (event) {
       var $target = $(event.currentTarget);
       if ($target.is('.dropdown-submenu')) return false;
       $target.closest('.btn-group')
           .find('[data-bind="label"]').text($target.text())
           .end()
           .children('.dropdown-toggle').dropdown('toggle');
       return false;
   });
});//]]>  
</script>
</head>
<body style='margin:30px'>

  <div class="panel panel-default">
    <div class="panel-body">
      <div class="btn-group btn-input clearfix">
        <button type="button"
          class="btn btn-default dropdown-toggle form-control"
          data-toggle="dropdown">
          <span data-bind="label">Select One</span>&nbsp;<span
            class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Item 1</a></li>
          <li class="dropdown dropdown-submenu"><a href="#">Submenu</a>
            <ul class="dropdown-menu">
              <li><a href="#">SubItem 1</a></li>
              <li><a href="#">SubItem 2</a></li>
            </ul></li>
          <li><a href="#">This is a longer item that will not
              fit properly</a></li>
        </ul>
      </div>
      <br />
      <h6>Selecting "Submenu" replaces the button with parent
        text and submenu text</h6>
    </div>
  </div>
</body>
</html>

Click to view the demo





















Home »
  Bootstrap »
    Example »




Accordion
Alert
Auto Complete
Badge
Breadcrum
Button
Carousel
Collapse
Dialog
Dropdown
Form
Icon
Jumbotron
Label
Layout
List
List Group
Media
Navigation Bar
Pager
Page Header
Panel
Paragraph
Pills
Popover
ProgressBar
ScrollSpy
Switch
Tab
Table
Thumnail
Tooltip
Tree
Well