collapse submenu when selecting another option from the menu

Question

collapse submenu when selecting another option from the menu

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a vertical menu with submenus, the process that makes my current menu is that each one clicks on the option it displays a submenu, and it is hidden until the user clicks on the parent menu again, as I can do so that when you click on another option in the parent menu that collapses the one that is open, to not have many submenus open and see more order, this is my code

<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>

javascript jquery css bootstrap

asked by Ivxn 29.08.2016 в 19:22

source

2 answers

Button border in c # Restore table backup in sql and php

score 1 · Answer 1

As you are using bootstrap, the simplest is to create the menu with the accordion component ( link ), adjusting it a bit to your project:

<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>

score 0 · Answer 2

You can use slideUp () from 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");
 })

Keep in mind that this would be done manually, it may be that bootstrap has in the class that you are using some method for this already defined.