jQuery 實現點擊切換顯示/隱藏與滑鼠移開自動隱藏效果

需求描述

點擊某元素顯示對應內容，再次點擊或滑鼠移開該內容時自動隱藏。

HTML 結構範例

<div id="a">
  <div class="1">.cls1..</div>
  <div class="2">.cls2..</div>
  <div class="3">.cls3..</div>
  <div class="4">.cls4..</div>
  <div class="5">.cls5..</div>
</div>
<div id="b">
  <div class="6">.cls6..</div>
</div>

jQuery 實作碼

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
    // 點擊 class 為 1,3,5 的 div，切換顯示下一個 class 的 div
    $('div.1, div.3, div.5').click(function(){
        var c = parseInt(this.className, 10) + 1;
        $('div.' + c).toggle();
    });

    // 滑鼠離開 class 為 2,4,6 的 div 時隱藏自身
    $('div.2, div.4, div.6').mouseleave(function(){
        $(this).hide();
    });
});
</script>

關鍵方法解析

• .toggle()：在顯示/隱藏狀態間切換。
• .mouseleave()：滑鼠指標離開元素邊界觸發。
• parseInt(this.className, 10)：從 class 名稱解析數字，配合命名規則定位目標元素。

擴充建議

• 若結構較複雜，建議改用 data-target 屬性明確綁定目標元素，避免依賴 class 命名規則。
• 加入動畫效果：.slideToggle()、.fadeToggle()。