jQuery 顯示隱藏層交互：點擊顯示、鼠標移出隱藏、文本動態切換實現

需求邏輯

• 點擊 class="trigger" 元素 → 顯示 class="panel" 層
• 同時將觸發元素文本改為「.」
• 鼠標移出觸發元素 → 隱藏面板、恢復文本

實現代碼

$(function() {
    var $trigger = $('.trigger');
    var $panel = $('.panel');
    var originalText = $trigger.text();

    $trigger.on('click', function(e) {
        e.stopPropagation(); // 防止冒泡觸發 mouseout
        $panel.show();
        $trigger.text('.');
    });

    $trigger.on('mouseout', function() {
        $panel.hide();
        $trigger.text(originalText);
    });

    // 可選：點擊面板內部不隱藏
    $panel.on('mouseout', function(e) {
        if (!$(e.relatedTarget).closest($trigger).length) {
            $panel.hide();
            $trigger.text(originalText);
        }
    });
});

關鍵細節

• e.stopPropagation()：點擊時阻止事件冒泡，避免瞬間觸發 mouseout 隱藏
• 保存原始文本：originalText 變量實現恢復
• 面板內移出判邏輯：e.relatedTarget 判斷鼠標是否真正離開交互區

CSS 配合

.panel { display: none; position: absolute; z-index: 100; background: white; border: 1px solid #ccc; padding: 10px; }

「點擊顯示、移出隱藏」是經典下拉/彈層模式。事件流控制（冒泡、進出判斷）是實現流暢體驗的關鍵。