Twitter Bootstrap Question posted in

togggle menu need to open on click and close itself when click the other menu – Twitter bootstrap

How can make it make
1- open toggle menu when on click menu (not opened by default)
2- close itself – if click other parent menu
trying to make it work for the project

and i copied from cssdesk

$('.inbox li').click(function(e) {
    $('.inbox li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});
$(document).ready(function () {
	$('.tree-toggler').click(function () {
		$(this).parent().children('ul.tree').toggle(300);
});
});
	<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" class="cssdeck">

<ul class="inbox-nav nav" style="border-top: 1px solid #eef1f5; margin-top:10px;" >
					<li class="">
						<a href="javascript:;" id="fldr3">menu 1
					</li>
					<li class="">
						<a data-title="Inbox" data-type="important" href="javascript:;">2nd Menu</a>
					</li>
					<li class="">
						<a data-title="Sent" data-type="sent" href="javascript:;">menu2</a>
					</li>
					<li class="divider"></li>
                    <li class="active tree-toggler">
                      <a href="javascript:;" id="fldr2">Toggle menu</a></li>
                        <ul class="nav nav-list tree">
                         <li class=""><a href="#">Link</a></li>
                         <li class=""><a href="#">Link</a></li>
                       </ul>
					</li>
				</ul>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Tags:

2

Answers


  1. 0

    If user click is not neccesary you can do it by CSS, this is an example the 4th menu item has sub menu items

    .menu,
.menu-item {
  display: inline;
  cursor: default;
}
.menu-item.has-subItem {
  position: absolute;
}
.menu-item ul {
  display: none;
  position: absolute;
  top: 15px;
  left: 0;
  padding: 0;
}
.menu-item:hover ul {
  display: inline;
}
    <ul class='menu'>
  <li class='menu-item'>Item 1</li>

  <li class='menu-item'>Item 2</li>

  <li class='menu-item'>Item 3</li>

  <li class='menu-item has-subItem'>Item 4
    <ul>
      <li class='sub-item'>sub 1</li>
      <li class='sub-item'>sub 2</li>
      <li class='sub-item'>sub 3</li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    In your $('.inbox li').click() function use jquery’s .hide() function on the ul.tree element. Since .hide() won’t do anything if the element is already hidden, you don’t need to check if it needs to be hidden.

    (Similarly, you can pull the $this.addClass('active'); statement out of the if, since it simply won’t do anything if the class is already added!)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search