0

estoy intentando de que cambie la propiedad active de la etiqueta a en mi menú, pero cuando doy click me cambia la propiedad pero automáticamente vuelve todo como estaba, El proyecto lo estoy realizando en Symfony y plantillas twig. Y quisiera agregarle el cambio de color en el menu para evitar que se pierdan en el sistema. les dejo el código como esta en el proyecto.

nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <!-- Add icons to the links using the .nav-icon class
         with font-awesome or any other icon font library -->
    <li class="nav-item menu-open">
        <a href="#" class="nav-link active">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>
                Procesos
                <i class="right fas fa-angle-left"></i>
            </p>
        </a>
        <ul class="nav nav-treeview" id="menu">
            <li class="nav-item">
                <a href="{{ path('archivo_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Planificación</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('medicion_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Medición y Análisis</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('investigacion_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Investigación y Desarrollo</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('compras_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Compras</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('produccion_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Producción de Inyectables</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('yogurt_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Producción de Yogurt</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ path('capitalh_index') }}" class="nav-link">
                    <i class="far fa-circle nav-icon"></i>
                    <p>Capital Humano</p>
                </a>
            </li>
        </ul>
    </li>
</ul>

Este es el Script

 $('li a').click(function(e) {
        //e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('li.active,a.active').removeClass('active');
        $this.addClass('active');
        $this.parent().addClass('active');

    });

En espera de alguna solución

1 respuesta 1

0

Fíjate que en el siguiente fragmento retiras la clase:

$this.closest('ul').find('li.active,a.active').removeClass('active');

Pero al momento la vuelves a añadir con:

$this.addClass('active');
$this.parent().addClass('active');

Al hacer el removeClass del ul mas cercano lo estas volviendo a poner con el parent addClass.

Espero haberte resuelto la duda!

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.