Bootstarp創造可折疊的元件_javascript技巧
本文將學習如何透過 Bootstarp 創建可折疊的元件，具體內容如下
什麼是必需的
您必須引用 jquery.js 和 bootstrap-collapse.js - 這兩個 JavaScript 檔案都位於 docs/assets/js 資料夾內。
您可以在不編寫大量 JavaScript 或不呼叫 JavaScript 的情況下建立可折疊的元件。
實例
第一個實例示範如何不呼叫 JavaScript 來建立可折疊的元件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
解釋
這裡有三點要注意。第一，將 data-toggle="collapse" 新增到您要點擊的連結上，用來展開或折疊元件。
第二，新增一個 href 或一個 data-target 屬性到父元件，它的值為子元件的 id。
第三，加入一個 data-parent 屬性用來創造手風琴式的效果。 data-parent 屬性的值與主容器 div （儲存整個手風琴組件）的 id 屬性的值相同。如果您想要創建一個簡單的折疊組件，不需要像手風琴那麼複雜，就不需要添加這個屬性。
實例
第二個實例示範如何建立簡單的可折疊組件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
透過 JavaScript 呼叫
您可以使用下面的程式碼來透過 JavaScript 觸發折疊。
$(".collapse").collapse() 選項、方法與事件
這裡有一些透過 Bootstrap Collapsible JavaScript 外掛程式使用的選項、方法、事件。具體如下圖所示：
選項
parent:值的類型為 Selector。預設值為 false。當父元素顯示時，父元素下所有的可折疊元素是關閉的。
toggle:值的類型為 Boolean。預設值為 true。當被呼叫時，切換所有的可折疊元素。
toggle:值的類型為 Boolean。預設值為 true。當被呼叫時，切換所有的可折疊元素。
方法
.collapse(options):觸發可折疊內容。接受一個可選的 option 物件。
.collapse('toggle'):展示或隱藏一個可折疊的頁面元素。
.collapse('show'):展示一個可折疊的頁面元素。
.collapse(hide):隱藏一個可折疊的頁面元素。
事件
show:當 show 實例方法被呼叫之後，此事件會立即觸發。
shown:當可折疊頁面元素顯示出來之後（同時 CSS 轉場效果也已執行完畢），此事件被觸發。
hide:當 hide 實例方法被呼叫之後，此事件會立即觸發。
hidden:當可折疊頁面元素隱藏到使用者之後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。
以上就是本文的全部內容，希望對大家的學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何安裝Win10舊版元件DirectPlay
Dec 28, 2023 pm 03:43 PM
不少用戶在玩win10的的一些遊戲的時候總是會遇到一些問題，比如說卡屏和花屏等等情況，這個時候我們是可以採用打開directplay這個功能來解決的，而且功能的操作方法也很簡單。 win10舊版元件directplay怎麼安裝1、在搜尋框裡面輸入「控制台」然後開啟2、檢視方式選擇大圖示3、找到「程式與功能」4、點選左側的啟用或關閉win功能5、選擇舊版這裡的勾選上就可以了
Google Pixel 9 Pro Fold 手機殼曝光：外屏 6.4 英寸、內屏 8.02 英寸
Jun 25, 2024 pm 02:35 PM
6月25日消息，消息來源ytechb昨（6月24日）發布博文，分享了谷歌Pixel9ProFold手機殼渲染圖，再次展示了這款折疊螢幕背面的設計。先前消息，Google將於今年10月發表Pixel9系列手機，除了Pixel9系列三款手機之外，PixelFold也納入Pixel9系列中，正式上架後名稱為Pixel9ProFold。這次曝光的手機殼來自配件廠商Torro，該公司的英國和美國線上商店已經列出了該產品手機殼，並揭露了這款手機的設計和顯示器尺寸。頁面中展示了大量Pixel9ProFold手機殼渲染
三星萬元折疊機皇W25曝光：500萬像素屏下前攝 機身更薄了
Aug 23, 2024 pm 12:43 PM
8月23日消息，三星即將推出新款折疊手機W25，預計9月底亮相，將在屏下前攝、機身厚度上作出相應的提升。據報道，三星W25代號為Q6A，將配備500萬像素螢幕下鏡頭，相較於GalaxyZFold系列的400萬像素相機有所提升。此外，W25的外螢幕前置相機和超廣角相機預計分別為1000萬和1200萬像素。在設計上，W25折疊狀態的厚度約為10毫米，比標準版GalaxyZFold6薄約2毫米。螢幕方面，W25的外屏為6.5英寸，內屏為8英寸，而GalaxyZFold6的外屏為6.3英寸，內屏為
三星Galaxy Z Flip 6機模首曝：邊框更窄 摺痕依然存在
Jun 22, 2024 am 03:28 AM
6月21日消息，近日，外媒在網路上放出了三星GalaxyZFlip6的機模照片。根據圖片可以了解到，三星GalaxyZFlip6的邊框將進一步收窄，這意味著手機在折疊狀態下的寬度可能會減小，也將提供更舒適的握持感和便攜性。而且，GalaxyZFlip6的機模相較於上一代ZFlip5，整機顯得更加方正一些，背面的相機模組也要更加突出，預計採用了新的相機感光元件。不過，從正面看上去，手機的摺痕依然比較明顯，但考慮到洩漏的是模型機，與真機可能會有些許差距，因此僅供參考。在性能配置方面，Galaxy
如何使用 Vue 實現日曆元件？
Jun 25, 2023 pm 01:28 PM
Vue是一款非常流行的前端框架，它提供了許多工具和功能，如元件化、資料綁定、事件處理等，能夠幫助開發者建立出高效、靈活和易於維護的Web應用程式。在這篇文章中，我來介紹如何使用Vue實作一個日曆元件。 1.需求分析首先，我們需要分析這個行事曆組件的需求。一個基本的日曆應該具備以下功能：展示當前月份的日曆頁面；支援切換到前一月或下一月；支援點擊某一天，
折疊螢幕手機最大短板：沒有核心應用場景
Mar 16, 2024 am 09:04 AM
我們今天探討的並非某一款產品到底怎麼樣，而是回歸到「折疊螢幕」話題本身上來，探究一下折疊螢幕手機的「合理性」。首先還是看一看折疊螢幕手機的市場表現，根據IDC最新數據報告顯示，2023年全年中國折疊螢幕手機市場出貨量約700.7萬台，較去年同期成長114.5%。其中，2023年第四季中國折疊螢幕手機市場出貨量約277.1萬台，較去年同期成長149.6%，數據看起來確實還不錯，成長也很強勢。不過與2023年中國市場智慧型手機2.7億左右出貨量相比，這個數據就著實不太夠看了。總的來說
HTML、CSS與jQuery：實現圖片折疊展開特效的技巧
Oct 24, 2023 am 11:05 AM
HTML、CSS和jQuery：實現圖片折疊展開特效的技巧介紹在網頁設計和開發中，我們經常需要實現一些動態特效來增加頁面的吸引力和互動性。其中，圖片折疊展開特效是常見但又很有趣的技巧。透過這種特效，我們可以讓圖片在使用者的操作下折疊或展開，從而展示更多的內容或細節。本文將介紹如何使用HTML、CSS和jQuery來實現這種效果，並附上具體的程式碼範例。實現思
IDC 預計 2024 全球智慧型手機出貨量 12 億部：折疊螢幕 2,500 萬部，較去年同期成長 37%
Feb 24, 2024 pm 02:20 PM
2月24日消息，IDC近日發布市場研究報告，預估2024年全球智慧型手機出貨量將達到12億部，年增2.8%，隨後到2028年將維持較低的個位數成長。 IDC認為2024年整體出貨量仍低於疫情前的水平，但全球智慧型手機市場已走出低谷，開始呈現復甦上揚趨勢。 IDC認為推動整體市場復甦的兩個關鍵因素，其一是設備更新周期，其二新興市場需求的成長。另外還有兩個主要驅動力，IDC預估折疊屏手機2024年出貨量將達到2500萬部，同比增長37%；另外就是人工智能（AI）已迅速成為智能手機討論的一部分，引發了
