<li class="cate-item"> <button class="cate-label" >item 1 </button> <ul class="sub-categ"> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li> <li class="cate-item"> <button class="cate-label" >item 2 </button> <ul class="sub-categ"> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li>Este elemento li se genera dinámicamente. Quiero alternar li en el clic del botón cate-label. para eso, hice el siguiente código
$(document).on("click", "#categoryList > li .cate-label", function () { var currentItem = $(this).closest("li"); ItemToHide = $("#categoryList > li").not(currentItem); ItemToHide.removeClass("active-item"); ItemToHide.find(".sub-cate").hide(); currentItem.toggleClass("active-item"); } );cuando trato de ocultar el elemento usando ItemToHide.find(".sub-cate").hide(); no ocultaba nada. Traté de encontrar la longitud del artículo usando ItemToHide.find(".sub-cate").length pero devolvió 0.
Reduzca su manejo de eventos a algo más cercano. Envolví todo en una etiqueta <menu> y registré el evento de clic en lugar del document . No hace mucha diferencia en cuanto al rendimiento, pero lo sugiero porque parece que su perspectiva está sesgada si se trata de una vista más grande del DOM y será propenso a errores:
var currentItem = $(this).closest("li"); ItemToHide = $("#categoryList > li").not(currentItem); ItemToHide.removeClass("active-item"); ItemToHide.find(".sub-cate").hide(); currentItem.toggleClass("active-item");Esa pesadilla es ahora:
$(this).next('.sub-categ').toggle('ease-out'); $('menu').on("click", ".cate-label", toggleList); function toggleList(e) { $(this).next('.sub-categ').toggle('ease-out'); }; <menu> <li class="cate-item"> <button class="cate-label">item 1 </button> <ul class="sub-categ"> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li> <li class="cate-item"> <button class="cate-label">item 2 </button> <ul class="sub-categ"> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li> </menu> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>En realidad, el nombre de la clase no es correcto. Debería ser 'sub-cate' , no 'sub-categ' .
$(document).on("click", "#categoryList > li .cate-label", function () { var currentItem = $(this).closest("li"); ItemToHide = $("#categoryList > li").not(currentItem); ItemToHide.removeClass("active-item"); ItemToHide.find(".sub-cate").hide(); currentItem.toggleClass("active-item"); }); <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <div id="categoryList"> <li class="cate-item"> <button class="cate-label" >item 1 </button> <ul class="sub-cate"><!--rename the class name--> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li> <li class="cate-item"> <button class="cate-label" >item 2 </button> <ul class="sub-cate"><!--rename the class name--> <li> sub item 1</li> <li> sub item 2</li> <li> sub item 3</li> <li> sub item 4</li> </ul> </li> </div>