jquery如何控制li元素的顯示與隱藏

# jQuery如何控制li元素的顯示與隱藏

在Web開發中，動態控制元素的顯示與隱藏是常見需求。本文將詳細介紹如何使用jQuery實現對`<li>`元素的顯示/隱藏控制，涵蓋基礎方法、動畫效果、條件判斷等實用技巧。

## 一、基礎顯示與隱藏方法

### 1. show() 和 hide()

```javascript
// 隱藏所有li元素
$("ul li").hide(); 

// 顯示所有li元素
$("ul li").show();

特點： - 立即顯示/隱藏，無過渡動畫 - 會保留元素的原始display屬性（block/inline-block等）

2. toggle() 方法

// 切換顯示狀態（顯示?隱藏）
$("ul li").toggle();

二、帶動畫效果的顯示/隱藏

1. 淡入淡出效果

// 淡出隱藏（默認400ms）
$("li").fadeOut(); 

// 淡入顯示
$("li").fadeIn("slow"); // 可設置速度參數：slow/fast/毫秒數

// 切換
$("li").fadeToggle(1000); // 1秒動畫

2. 滑動效果

$("li").slideUp();    // 向上收起
$("li").slideDown();  // 向下展開
$("li").slideToggle(500); // 帶速度參數的切換

三、精確控制特定li元素

1. 通過索引控制

// 隱藏第三個li（索引從0開始）
$("ul li:eq(2)").hide();

// 顯示最后一個li
$("ul li:last").show();

2. 通過類名/屬性控制

// 隱藏所有帶active類的li
$("li.active").hide();

// 顯示有data-target屬性的li
$("li[data-target]").show();

四、條件判斷顯示隱藏

1. 根據內容過濾

// 隱藏文本包含"測試"的li
$("ul li:contains('測試')").hide();

2. 根據可見性操作

if($("li").is(":hidden")) {
    $("li").show();
} else {
    $("li").hide();
}

五、鏈式操作與回調函數

// 鏈式操作示例
$("ul")
  .find("li")
  .fadeOut(300)
  .delay(500)
  .fadeIn(300);

// 帶回調函數
$("li").slideUp(400, function() {
    console.log("隱藏完成！");
});

六、性能優化建議

1. 緩存選擇器：

   var $listItems = $("ul li");
   $listItems.hide();
   

2. 事件委托（適合動態生成的li）：

   $("ul").on("click", "li", function(){
      $(this).toggle();
   });
   

3. 批量操作時優先使用父元素：

   $("ul").hide(); // 比隱藏所有li性能更好
   

七、實際應用案例

1. 手風琴菜單實現

$(".accordion li").click(function(){
    $(this).siblings().slideUp();
    $(this).slideToggle();
});

2. 動態過濾列表

<input type="text" id="search">
<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
$("#search").keyup(function(){
    var filter = $(this).val().toLowerCase();
    $("ul li").each(function(){
        $(this).toggle($(this).text().toLowerCase().includes(filter));
    });
});
</script>

總結

jQuery提供了豐富的DOM操作方法，通過合理組合show()/hide()/toggle()及其動畫版本，可以輕松實現各種顯示/隱藏需求。建議根據實際場景選擇合適的方法，并注意性能優化。

注意：現代開發中也可考慮使用原生JavaScript的classList或CSS過渡動畫實現類似效果，但jQuery在兼容性和簡潔性上仍有優勢。 “`

文章包含： 1. 基礎方法介紹 2. 動畫效果實現 3. 精確控制技巧 4. 條件判斷邏輯 5. 性能優化建議 6. 實際應用案例 7. 總結與注意事項

總字數約900字，采用Markdown格式，包含代碼塊、標題層級和重點標注。