0
建立一個自定義的手風琴菜單我一直在嘗試使用手風琴菜單列出R閃亮儀表板。這個想法是，單擊列表條目以手風琴的方式展開描述。從股票代碼
我正在使用股票動畫版本accordion menu from W3Schools並試圖使其適應我的需求。不過，我需要將描述部分展開爲更大，因爲我希望描述的背景是儀表板的預覽圖像。
但是，我很難使它適用於這個股票版本，因爲它們促進了描述部分的擴展。
這裏是我的代碼迄今爲我現在有，這基本上是W3Schools的
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ccc;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/* Style the accordion panel. Note: hidden by default */
div.previewPanel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="accordion">Thing1</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>
<button class="accordion">Thing2</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>
<button class="accordion">Thing3</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>
<button class="accordion">Thing4</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>
<button class="accordion">Thing5</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>
<button class="accordion">Thing6</button>
<div class="previewPanel">
<p>Preview image goes here</p>
</div>這裏的動畫版被鏈接到一個codepen與標記中的元素這種方式可能會更好地傳達我想要做的事情。
問題是：我可以做些什麼來改變擴大區域的大小，或者我可以使用哪些更好的工作？ exec類型非常喜歡動畫和時尚的設計，因爲它們確實向潛在客戶展示了這些東西。
檢查ANS ..... –