Tengo este menú de elementos, ¿cuál es el mejor enfoque para cambiar el último elemento div de oculto a visible cuando uno de los elementos con clase cerrada cambia para abrir usando Jquery? Lo que quiero es cuando hago clic en uno de los li y cambio de cerrado a , quiero cambiar el ul dinámico para mostrar ninguno o bloquear, ¿necesito recorrer todos los elementos y verificar su clase?
<ul class="groupmenu"> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> <ul class="level1"></ul> <li class="closed"></li> </ul> <div class="dynamic hidden"></div>En primer lugar, sus elementos ul.level1 deben estar envueltos en elementos li .
Luego, al hacer clic en un elemento li.closed , podría:
ul.level1 .div.dynamic usando !$("ul.level1:not(.hidden)").length . Devolverá un booleano cuyo valor será false si hay al menos 1 elemento ul.level1 que no tenga la clase .hidden . De lo contrario, devolverá true . $("li.closed").click(function() { $(this).find("ul.level1").toggleClass("hidden"); $("div.dynamic").toggleClass("hidden",!$("ul.level1:not(.hidden)").length); }); .hidden { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="groupmenu"> <li class="closed"> ul closed <ul class="level1 hidden"> <li>visible</li> </ul> </li> <li class="closed"> ul closed <ul class="level1 hidden"> <li>visible</li> </ul> </li> <li class="closed"> ul closed <ul class="level1 hidden"> <li>visible</li> </ul> </li> <li class="closed"> ul closed <ul class="level1 hidden"> <li>visible</li> </ul> </li> </ul> <div class="dynamic hidden"> dynamic </div>