JavaScript 實現側邊欄菜單隱藏/顯示切換效果

需求場景

框架佈局頁面，左側導航菜單，點擊控制條實現滑動隱藏/顯示。用戶無代碼基礎，詢問思路可行性及 Dreamweaver 能否實現。

推薦結構與代碼

HTML 結構

<div class="top">Title</div>
<div class="left" id="li_left">
    <iframe src="left_url" width="100" height="300" frameborder="0"></iframe>
</div>
<div class="toggle-btn" id="sanjiao"></div>
<div class="right">
    <iframe src="right_url" name="right" width="700" height="300" frameborder="0"></iframe>
</div>

jQuery 交互邏輯

$("#sanjiao").click(function() {
    var $left = $("#li_left");
    if ($(this).hasClass("xianshi")) {
        $(this).removeClass("xianshi").addClass("yincang");
        $left.hide();  // 或使用 animate 實現滑動
    } else {
        $(this).removeClass("yincang").addClass("xianshi");
        $left.show();
    }
});

關鍵建議

• 使用 position:absolute 或 flex 佈局替代老式 frameset，更易控制；
• Dreamweaver 只能生成靜態代碼，動態交互需手寫 JS/CSS；
• 進階優化：用 CSS transition 實現平滑動畫，避免 JS 直接操作 width 造成回流。