¿Cómo se puede hacer? 1- abrir el menú de alternancia cuando está en el menú de clic (no se abre de forma predeterminada) 2- cerrarse a sí mismo: si hace clic en otro menú principal, intenta que funcione para el proyecto

Y copié de 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>
0
kris 11 dic. 2016 a las 16:30

2 respuestas

Si el clic del usuario no es necesario, puede hacerlo mediante CSS, este es un ejemplo, el cuarto elemento del menú tiene elementos de submenú

.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>
0
Azad 11 dic. 2016 a las 16:50
He añadido collapse y funciona perfectamente `
 – 
kris
14 dic. 2016 a las 17:51

En su función $('.inbox li').click() use la función .hide() de jquery en la ul.tree elemento. Dado que .hide() no hará nada si el elemento ya está oculto, no es necesario comprobar si es necesario ocultarlo.

(De manera similar, puede extraer la instrucción $this.addClass('active'); de if, ¡ya que simplemente no hará nada si la clase ya está agregada!)

0
bscotchAdam 11 dic. 2016 a las 16:51
Ah, y agregue style="display:none;" al html del elemento ul.tree para que esté oculto por defecto (lo siento, me perdí esa parte de la pregunta la primera vez).
 – 
bscotchAdam
11 dic. 2016 a las 18:06