Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » REEMPLAZAR CLASE SIN AFECTAR A LOS DEMAS ELEMENTOS

JQuery - REEMPLAZAR CLASE SIN AFECTAR A LOS DEMAS ELEMENTOS

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 3
Ha disminuido 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

REEMPLAZAR CLASE SIN AFECTAR A LOS DEMAS ELEMENTOS

Publicado por Jonathan (2 intervenciones) el 24/08/2020 03:15:06
Tengo un menú con sub menús de la siguiente forma
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>
    <li class="btn_submenu">
       <a href="#">SUB MENU 1<i class="icon-chevron-down"></i></a>
       <ul>
          <li>OPCION 1</li>
          <li>OPCION 2</li>
          <li>OPCION 3</li>
       </ul>
    </li>
    <li class="btn_submenu">
       <a href="#">SUB MENU 2<i class="icon-chevron-down"></i></a>
       <ul>
          <li>OPCION 1</li>
          <li>OPCION 2</li>
          <li>OPCION 3</li>
       </ul>
    </li>
</ul>

Quiero reemplazar la clase "icon-chevron-down" solo en el submenu que estoy haciendo clic, pero resulta que se reemplaza en todos los submenus, lo estoy haciendo de la siguiente forma

1
2
3
4
5
6
$('.btn_submenu').click(function(){
    if(($('.btn_submenu .nav-link .icon-chevron-down').hasClass('icon-chevron-down'))){
        $('.nav-link .icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up');
 
    }
});

Estaria agradecido de su ayuda
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Francisco Javier
Val: 19
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

REEMPLAZAR CLASE SIN AFECTAR A LOS DEMAS ELEMENTOS

Publicado por Francisco Javier (8 intervenciones) el 18/09/2020 18:24:42
creo que deberisa darle tambien un id a cada .clase y montar dos funciones anónimas como la que has echo, algo así pero investiga no he podido comprobar, si tienes problemas dimelo que lo pruebo con icons distintos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <ul>
    <li id="menuUno"class="btn_submenu">
       <a href="#">SUB MENU 1<i class="icon-chevron-down"></i></a>
       <ul>
          <li>OPCION 1</li>
          <li>OPCION 2</li>
          <li>OPCION 3</li>
       </ul>
    </li>
    <li  id="menuDos"class="btn_submenu">
       <a href="#">SUB MENU 2<i class="icon-chevron-down"></i></a>
       <ul>
          <li>OPCION 1</li>
          <li>OPCION 2</li>
          <li>OPCION 3</li>
       </ul>
    </li>
</ul>
<script>
    $(document).ready(function(){
 
 
$('#menuUno .btn_submenu').click(function(){
    if(($('#menuUno .btn_submenu .nav-link .icon-chevron-down').hasClass('icon-chevron-down'))){
        $('.nav-link .icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up');
 
    }
});
        $('#menuDos .btn_submenu').click(function(){
    if(($('#menuDos .btn_submenu .nav-link .icon-chevron-down').hasClass('icon-chevron-down'))){
        $('.nav-link .icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up');
 
    }
});
         });
    </script>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar