我正在嘗試在我的網路應用程式（通過 GAS 構建）上實作可折疊按鈕。我是在 html 中構建頁面的新手，所以我有點卡住了一個問題，并沒有真正找到關于其他主題的任何答案。
按鈕正常作業并通過 jquery 隱藏/顯示我想要的內容，我粘貼了頭部和身體所需的片段。我的問題是引導按鈕的樣式以某種方式設定，它不適合我的網路應用程式全域方面，所以我希望能夠隨意自定義它。
但要這樣做，我需要找到并閱讀每個引導類的細節，以便正確覆寫它。
我認為最好不要發布我的整個代碼，因為這是一個理論問題。
所以我有我的按鈕：
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
哪個針對面板：
<div class="collapse" id="collapseExample">
<div class="card card-body">
<table>
<tr>
<td colspan="3">OK</td>
<td>OK</td>
<td colspan="3">OK</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</div>
</div>
具體來說，我希望能夠在按鈕處于活動狀態/單擊時更改背景。
我嘗試檢查頁面但宣告類
.collapse show{
background-color: red;
}
沒有改變任何事情，無論如何，我什至不確定這是正確的方法。
有關資訊，這些是粘貼的鏈接：
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
在體內：
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
歡迎任何幫助！謝謝
uj5u.com熱心網友回復：
樣式化按鈕或元素通常有兩種方法：
- 使用引導類。您可以在此處找到不同的引導按鈕類：https ://getbootstrap.com/docs/5.1/components/buttons/
- 添加您自己的類和樣式。
您的解決方案并非完全錯誤，您只是忘記了點：.collapse.show 但是這些類不是用于按鈕，而是用于可折疊元素。為了給按鈕設定樣式，我總是創建自己的類。您還可以通過將屬性添加到 [] 中來使用 css 中的屬性，例如 aria-expaned="true" 或 type="button"。在這里您可以找到樣式的一個示例：
.custom-btn{
color: red;
}
.custom-btn[aria-expanded="true"]{
color: green;
}
.collapse.show{
color: blue;
}<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="custom-btn">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Collapsed Text.
</div>
</div>我希望我的回答對您的問題有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507464.html
標籤：javascript jQuery css 推特引导 谷歌应用脚本
上一篇：在移動設備上，文本沒有占據全屏