1

Tengo un menú vertical con submenus, el proceso que hace mi menú actual es que cada que uno da clic sobre la opción esta despliega un submenu, y se oculta hasta que el usuario vuelve a dar clic sobre en menú padre, como puedo hacer para que cuando de clic en otra opción del menú padre colapse el que este abierto, para no tener muchos submenus abierto y se vea mas orden, este es mi codigo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">

  <div class="sidebar" data-background-color="black" data-active-color="danger">

    <div class="sidebar-wrapper">
      <div class="logo">
        <div style="margin:auto auto">

        </div>
      </div>

      <ul class="nav">
        <li>
          <a href="#" data-toggle="collapse" data-target="#ordenesServicio" class="collapsed">
            <p><i class="ti-user"></i> Menu 1<span class="ti-arrow-down"></span>
            </p>
          </a>
          <div class="collapse" id="ordenesServicio" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
              </li>

            </ul>
          </div>
        </li>

        <li>
          <a href="#" data-toggle="collapse" data-target="#toggleDemo" class="collapsed">
            <p><i class="ti-user"></i> Menu 2<span class="ti-arrow-down"></span>
            </p>
          </a>
          <div class="collapse" id="toggleDemo" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 3</a>
              </li>
            </ul>
          </div>
        </li>

        <li>
          <a href="#" data-toggle="collapse" data-target="#toggleDemonc" class="collapsed">
            <p><i class="ti-user"></i> Menu 3<span class="ti-arrow-down"></span>
            </p>
          </a>
          <div class="collapse" id="toggleDemonc" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 1</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 2</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 3</a>
              </li>
              <li><a href="#"><i class="ti-angle-right"></i>Opcion 4</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>

    </div>
  </div>


</div>

2 respuestas 2

1

Como estás usando bootstrap lo más sencillo es crear el menú con el componente de acordeón (http://getbootstrap.com/javascript/#collapse-example-accordion), ajustándolo luego un poco a tu proyecto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading1">
      <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
             Menu 1
          </a>
        </h4>
    </div>
    <div style="height: 0px;" aria-expanded="false" id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
      <div>
        <a href="#" class="list-group-item">Option 1</a>
        <a href="#" class="list-group-item">Option 2</a>
        <a href="#" class="list-group-item">Option 3</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading2">
      <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
             Menu 2
          </a>
        </h4>
    </div>
    <div style="height: 0px;" aria-expanded="false" id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
      <div>
        <a href="#" class="list-group-item">Option 1</a>
        <a href="#" class="list-group-item">Option 2</a>
        <a href="#" class="list-group-item">Option 3</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading3">
      <h4 class="panel-title">
          <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
            Menu 3
          </a>
        </h4>
    </div>
    <div style="height: 0px;" aria-expanded="false" id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
      <div>
        <a href="#" class="list-group-item">Option 1</a>
        <a href="#" class="list-group-item">Option 2</a>
        <a href="#" class="list-group-item">Option 3</a>
      </div>
    </div>
  </div>
</div>

0

Puedes usar slideUp() de jquery.

$(".collapsed").click(function(){
   //Primero cerramos cualquier submenu abierto
   $(".collapse>.nav.nav-list").slideUp("300");
   //Despues abrimos el submenu correspondiente
   $(this.getAttribute("data-target")).slideDown("300");
 })

Ten en cuenta que esto seria hacerlo de forma manual, puede ser que bootstrap tenga en la clase que estás usando algun metodo para esto ya definido.

2
  • intente pero no muestra las opciones del submenu solo hace el intento se ve que se baja y luego se sube
    – Ivxn
    Commented el 29 ago. 2016 a las 18:49
  • Lo que tienes que hacer es cuando cliques el segundo botón mirar si hay algún otro item activado(Abierto) si es así cierras el que esta activado
    – AitorUdabe
    Commented el 30 ago. 2016 a las 9:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.