¿Cómo mantener menú abierto al dar clic a submenú?

Question

Estoy trabajando en un proyecto Laravel 5.5 con Boostrap 4, tengo actualmente integrado menú y submenú dentro de mi sidebar, mi consulta es cómo hacer o más bien, qué clase o código utilizar para que al dar clic a una sección dentro del menú treeview esté en su raíz no se cierre, se mantenga abierto mientras esté en él.

Tengo así mi código actualmente:

 <li class="nav-item has-treeview menu-close">
          @can('ingresos.index') 
          <a href="{{ URL::asset('admin/ingresos') }}" class="nav-link {{ active('admin/ingresos*') }}">
              <i class="nav-icon fa fa-dashboard" style="color:white"></i>
              <p>
                Contabilidad
                <i class="right fa fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
            @endcan
            @can('ingresos.index') 
            <li class="nav-item">
            <a href="{{ URL::asset('admin/ingresos') }}" class="nav-link {{ active('admin/ingresos*') }}">
                    <i class="nav-icon fa fa-edit" style="color:white"></i>
                    <p>Ingresos</p>
                  </a>
            </li>
            @endcan()

            @can('egresos.index') 
            <li class="nav-item ">
            <a href="{{ URL::asset('admin/egresos') }}" class="nav-link {{ active('admin/egresos*') }}">
                    <i class="nav-icon fa fa-edit" style="color:white"></i>
                    <p>Egresos</p>
                  </a>
            </li>
            @endcan()

            @can('condonaciones.index')
            <li class="nav-item">        
                  <a href="{{ URL::asset('admin/condonaciones') }}" class="nav-link {{ active('admin/condonaciones*') }}">
                  <i class="fa fa-book nav-icon" style="color:white"></i>
                    <p>Condonaciones</p>
                  </a>
            </li>
            @endcan()

            @can('conciliaciones.index') 
            <li class="nav-item">
            <a href="{{ URL::asset('admin/conciliaciones') }}" class="nav-link {{ active('admin/conciliaciones*') }}">
                    <i class="fa fa-address-card-o nav-icon" style="color:white"></i>
                    <p>Conciliación bancaria</p>
                  </a>
            </li>
            @endcan()
            </ul>
          </li>

Lo que busco es que si ingreso al menú egresos, ingresos u otro dentro de la sección, el menú de contabilidad se mantenga abierto.

Answer 1

Podrías manejar tú mismo el evento de click en un menú abierto, impedir que se propague y hacer algo con el evento y su respectivo target.

$('.dropdown-item').on('click', (event) => {
  event.preventDefault();
  event.stopPropagation();
  $('#content').text('Navegando hacia ' + event.target.href);
});

Pero también está el truco de envolver los links en un tag <form>

    <div class="dropdown-menu" aria-labelledby="dropdown2">
      <form>
        <a class="dropdown-item" href="#action">Action</a>
        <a class="dropdown-item" href="#otra_accion">Otra acción </a>
      </form>
    </div>

$('.interceptando .dropdown-item').on('click', (event) => {
  event.preventDefault();
  event.stopPropagation();
  $('#content').text('Navegando hacia ' + event.target.href);
});
$('.usando_form .dropdown-item').on('click', (event) => {
  $('#content').text('Navegando hacia ' + event.target.href);
});

.btn-group .btn {
  margin: 0 10px;
  float: left;
  border-radius: 5px;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
}

#content {
  margin-top: 90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- Example split danger button -->


<div class="btn-group">

  <div class="dropdown interceptando">
    <button type="button" class="btn btn-info dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Intercepta Evento
  </button>
    <div class="dropdown-menu" aria-labelledby="dropdown1">

      <a class="dropdown-item" href="#micuenta">Mi cuenta</a>
      <a class="dropdown-item" href="#settings">Settings</a>


    </div>
  </div>
  <div class="dropdown usando_form">

    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Envuelve en form
  </button>

    <div class="dropdown-menu" aria-labelledby="dropdown2">
      <form>
        <a class="dropdown-item" href="#action">Action</a>
        <a class="dropdown-item" href="#otra_accion">Otra acción </a>
      </form>
    </div>
  </div>

  <div class="dropdown usando_form">

    <button class="btn btn-warn dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Comportamiento normal
  </button>

    <div class="dropdown-menu" aria-labelledby="dropdown3">

      <a class="dropdown-item" href="#click_esconde">Click esconde dropdown</a>


    </div>
  </div>

</div>
<div id="content">

</div>