jQuery 實現兩個隱藏 div 聯動顯示/隱藏

需求

兩個 div 初始隱藏，當其中一個顯示時，另一個自動顯示；隱藏時同理。

核心邏輯

// 監聽 div1 顯示狀態變化（示例：按鈕切換）
$('#toggleBtn').click(function() {
    $('#div1').toggle(); // 切換顯示/隱藏
    // 聯動 div2
    if ($('#div1').is(':visible')) {
        $('#div2').show();
    } else {
        $('#div2').hide();
    }
});

// 或封裝為通用函數
function syncDivs(sourceSelector, targetSelector) {
    var $source = $(sourceSelector);
    var $target = $(targetSelector);
    if ($source.is(':visible')) $target.show(); else $target.hide();
}

CSS 初始隱藏

#div1, #div2 { display: none; }

進階：監聽任意顯示狀態變化

若 div1 由多處代碼控制，可用 MutationObserver 監聽 style 屬性：

var observer = new MutationObserver(function(mutations) {
    syncDivs('#div1', '#div2');
});
observer.observe(document.getElementById('div1'), { attributes: true, attributeFilter: ['style'] });

注意

• :visible / :hidden 選擇器包含 display:none、visibility:hidden、opacity:0、寬高為 0 等情況。
• 頻繁切換建議用 toggleClass('hidden') 配合 CSS .hidden { display:none; }，性能優於直接操作 style。