Estoy tratando de hacer una barra lateral que almacene el enlace del último clic en el almacenamiento local y aún abra los enlaces de colapso después de que la página se vuelva a cargar.
$(".clickedLink").parent().parent().css('background-color', 'green');¿Alguien podría ayudarme a seleccionar elementos?
Ejemplo: si hago clic en el enlace "PHP Advanced", seleccionará el #5 y el #6, también el #1 y el #2. Pero no seleccionando el #3 y #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__ <div class="collapse"> __#2__ <ul> <li> <a class="nav-link" aria-expanded="false">HTML</a> __#3__ <div class="collapse"> __#4__ <ul> <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li> <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li> <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li> </ul> </div> </li> <li> <a class="nav-link" aria-expanded="false">PHP</a> __#5__ <div class="collapse"> __#6__ <ul> <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li> <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li> <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li> </ul> </div> </li> </ul> </div>Agradecería si alguien me puede ayudar
Puedes hacer algo como esto. llame a los parents('.collapse') para obtener a todos los padres con la clase dada. Luego llame a prev() para obtener los enlaces.
$('a').click(function() { var parents = $(this).parents('.collapse'); parents.css('border-top', '1px solid red'); parents.prev().css('border-top', '1px solid blue'); return false; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="nav-link" aria-expanded="false">Programming</a> __#1__ <div class="collapse"> __#2__ <ul> <li> <a class="nav-link" aria-expanded="false">HTML</a> __#3__ <div class="collapse"> __#4__ <ul> <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li> <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li> <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li> </ul> </div> </li> <li> <a class="nav-link" aria-expanded="false">PHP</a> __#5__ <div class="collapse"> __#6__ <ul> <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li> <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li> <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li> </ul> </div> </li> </ul> </div>