javascript 展開 收起dialog，在web應用開發中是非常常見的一種交互方式。當頁面上有大量內容需要展示，但又不能同時將所有內容直接呈現給用戶時，就需要采用折疊式顯示的方式，即展開按鈕點擊后展開內容，再次點擊后收起內容。這種方式可以提高頁面的可讀性和用戶體驗。 以前，在實現javascript 展開 收起dialog時，常常需要花費大量時間和精力，因為需要手寫大量的樣式和腳本代碼。但現在有了很多現成的開源插件和框架，例如jQuery、Bootstrap等，使得實現javascript 展開 收起dialog變得更加簡單、快捷。下面，我們介紹一些常見的實現方式及其代碼演示。 一、基礎的展開收起實現方式 基礎的展開收起實現方式比較簡單，可以通過手寫一些簡單的CSS和Javascript代碼實現。首先，需要定義一個展開收起的按鈕，在CSS中設置其樣式。

.collapse-button{
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
margin-bottom: 10px;
cursor: pointer;
}

然后，在Javascript中定義相關的事件，當展開按鈕被點擊時，顯示隱藏的內容。

var collapseButton = document.getElementById("collapse-button");
var content = document.getElementById("content");
var isCollapsed = true;
collapseButton.onclick = function(){
if(isCollapsed){
content.style.display = "block";
collapseButton.innerHTML = "收起";
isCollapsed = false;
}
else{
content.style.display = "none";
collapseButton.innerHTML = "展開";
isCollapsed = true;
}
}

二、使用jQuery實現展開收起效果 在jquery中，有一個非常方便的方法來實現展開收起效果，即.slideToggle()方法。該方法可以在展開和收起之間自動切換。 HTML代碼如下：

<div class="container">
<div class="header">
<h2>標題</h2>
<button class="collapse-button">展開</button>
</div>
<div class="content">
<p>內容</p>
</div>
</div>

CSS代碼如下：

.container{
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
}
.header h2{
margin: 0;
}
.collapse-button{
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
cursor: pointer;
}
.content{
display: none;
}

JavaScript代碼如下：

$(document).ready(function(){
$(".collapse-button").click(function(){
$(this).parent().next(".content").slideToggle(300);
if($(this).text() == "收起"){
$(this).text("展開");
}
else{
$(this).text("收起");
}
});
});

三、使用Bootstrap實現展開收起效果 Bootstrap是一套基于HTML、CSS、JavaScript開發的開源框架，其中包含了大量的UI組件和交互效果。在Bootstrap中，也提供了一個Collapse組件，可以用于實現展開收起效果。 HTML代碼如下：

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">標題</h3>
<a class="pull-right" data-toggle="collapse" href="#collapse-content">展開</a>
</div>
<div id="collapse-content" class="panel-collapse collapse">
<div class="panel-body">內容</div>
</div>
</div>

JavaScript代碼如下：

$(document).ready(function(){
$(".panel-title a").click(function(){
if($(this).text() == "展開"){
$(this).text("收起");
}
else{
$(this).text("展開");
}
});
});

以上就是javascript展開收起dialog的三種實現方式及其代碼演示。根據實際需求，可以選擇其中一種或多種方式進行實現。希望本文可以對您有所幫助。