如何在li中獲取ul

<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>

這個 li 專案是動態生成的，我想在 cate-label 按鈕單擊時切換 li。為此，我做了以下代碼

  $(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");
     
     
     }
     
     );

當我嘗試使用 ItemToHide.find(".sub-cate").hide(); 隱藏專案時 它沒有隱藏任何東西。我嘗試使用 ItemToHide.find(".sub-cate").length 查找專案的長度，但它回傳 0。

uj5u.com熱心網友回復：

將您的事件處理降低到更接近的程度。我將所有內容包裝在一個<menu>標簽中，并將點擊事件注冊到它而不是document. 它不會對性能產生太大影響，但我建議這樣做，因為如果處理更大的 DOM 視圖，您的視角似乎是傾斜的，并且您很容易出錯：

var currentItem = $(this).closest("li");
      ItemToHide = $("#categoryList > li").not(currentItem);
        ItemToHide.removeClass("active-item");
    ItemToHide.find(".sub-cate").hide();
      currentItem.toggleClass("active-item");

現在的噩夢是：

$(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>

uj5u.com熱心網友回復：

實際上，類的名稱是不正確的。應該的'sub-cate'，不是'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>

標籤：javascript jQuery

上一篇：如何在jquery中創建基于json物件的串列和錨點

下一篇：如何使用切換按鈕在本地存盤中保存div狀態（隱藏/顯示）