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>
説明
ここで注意すべき点は 3 つあります。まず、クリックしてコンポーネントを展開または折りたたむリンクに data-toggle="collapse" を追加します。
次に、子コンポーネントの ID を値とする href または data-target 属性を親コンポーネントに追加します。
3 番目に、data-parent 属性を追加してアコーディオン効果を作成します。 data-parent 属性の値は、メイン コンテナ div (アコーディオン コンポーネント全体を保持する) の id 属性の値と同じです。アコーディオンほど複雑にする必要がない単純なアコーディオン コンポーネントを作成する場合は、このプロパティを追加する必要はありません。
例
2 番目の例は、単純な折りたたみ可能なコンポーネントを作成する方法を示しています。
<!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 プラグインを通じて利用できるいくつかのオプション、メソッド、およびイベントを示します。詳細は以下の通りです。
オプション
親:値のタイプはセレクターです。デフォルト値は false です。親要素が表示されると、親要素の下にあるすべての折りたたみ可能な要素が閉じられます。
トグル:値はブール型です。デフォルト値は true です。呼び出されると、すべての折りたたみ可能な要素を切り替えます。
トグル:値はブール型です。デフォルト値は true です。呼び出されると、すべての折りたたみ可能な要素を切り替えます。
メソッド
.collapse(options): 折りたたみ可能なコンテンツをトリガーします。オプションのオプション オブジェクトを受け入れます。
.collapse('toggle'): 折りたたみ可能なページ要素を表示または非表示にします。
.collapse('show'): 折りたたみ可能なページ要素を表示します。
.collapse(hide): 折りたたみ可能なページ要素を非表示にします。
イベント
show: このイベントは、show インスタンス メソッドが呼び出された直後にトリガーされます。
表示: このイベントは、折りたたみ可能なページ要素が表示されたとき (および CSS トランジション効果が実行されたとき) にトリガーされます。
Hide: このイベントは、Hide インスタンス メソッドが呼び出された直後にトリガーされます。
hidden: このイベントは、折りたたみページ要素がユーザーに対して非表示になったとき (および CSS トランジション効果が完了したとき) にトリガーされます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7627
15
1389
52
89
11
31
140
Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法
Dec 28, 2023 pm 03:43 PM
win10で一部のゲームをプレイすると、画面がフリーズしたり画面がぼやけるなどの不具合が多くのユーザーに発生しますが、現時点ではダイレクトプレイ機能をオンにすることで問題を解決でき、機能の操作方法も非常に簡単です。 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日）ブログ投稿を公開し、Google Pixel 9 Pro Fold携帯電話ケースのレンダリングを共有し、この折りたたみ式スクリーンの背面のデザインを再度示しました。以前のニュースによると、Googleは今年10月にPixel 9シリーズの携帯電話を発売する予定で、Pixel 9シリーズの3つの携帯電話に加えて、Pixel FoldもPixel 9シリーズに含まれ、正式にPixel 9と名付けられる予定です。プロフォールド。今回公開された携帯電話ケースはアクセサリーメーカーのTorro社のもので、同社の英国および米国のオンラインストアでは製品の携帯電話ケースが掲載されており、携帯電話のデザインとディスプレイサイズが公開されている。このページには、多数の Pixel 9 Pro Fold 電話ケースのレンダリングが表示されます
サムスンの1万元折りたたみ携帯電話W25が明らかに：5メガピクセルの画面下フロントカメラとより薄いボディ
Aug 23, 2024 pm 12:43 PM
8月23日のニュースによると、サムスンは新しい折りたたみ式携帯電話W25を発売する予定で、9月末に発表される予定で、それに対応して画面下のフロントカメラと本体の厚さが改良される予定だという。報道によると、Samsung W25（コードネームQ6A）には5メガピクセルの画面下カメラが搭載される予定で、これはGalaxy Z Foldシリーズの4メガピクセルのカメラよりも改良されています。さらに、W25 の外部スクリーンフロントカメラと超広角カメラは、それぞれ 1,000 万画素と 1,200 万画素になると予想されています。デザイン面では、W25は折りたたんだ状態での厚さが約10mmと、標準のGalaxy Z Fold 6より約2mm薄い。画面に関しては、W25の外部画面は6.5インチ、内部画面は8インチですが、Galaxy Z Fold6の外部画面は6.3インチ、内部画面は8インチです。
Vueを使用してカレンダーコンポーネントを実装するにはどうすればよいですか?
Jun 25, 2023 pm 01:28 PM
Vue は非常に人気のあるフロントエンド フレームワークであり、コンポーネント化、データ バインディング、イベント処理など、開発者が効率的で柔軟で保守が容易な Web アプリケーションを構築するのに役立つ多くのツールと機能を提供します。この記事では、Vueを使ってカレンダーコンポーネントを実装する方法を紹介します。 1. 要件の分析 まず、このカレンダー コンポーネントの要件を分析する必要があります。基本的なカレンダーには次の機能が必要です: 当月のカレンダー ページの表示、前月または翌月への切り替えのサポート、特定の日のクリックのサポート、
Samsung Galaxy Z Flip 6モデルが初公開：より狭いベゼル、折り目はまだ存在
Jun 22, 2024 am 03:28 AM
6月21日のニュースによると、海外メディアは最近、Samsung Galaxy Z Flip 6のモデル写真をインターネット上で公開した。写真によると、Samsung Galaxy Z Flip 6の境界線がさらに狭くなることがわかります。これは、折りたたんだ状態での携帯電話の幅が減少する可能性があり、より快適なグリップと携帯性も提供することを意味します。さらに、前世代のZFlip5と比較して、Galaxy ZFlip6のモデルはより正方形になり、背面のカメラモジュールがより目立つようになり、新しいカメラセンサーが使用されると予想されます。ただし、正面から見ると、端末の折り目はまだ比較的明らかですが、リークされたモデルが模型端末であることを考慮すると、実際の端末とは多少の違いがある可能性があるため、参考程度に留めてください。性能構成的にはGalaxy
折りたたみ式スクリーン携帯電話の最大の欠点: コア アプリケーション シナリオがない
Mar 16, 2024 am 09:04 AM
今回お話しするのは、ある製品がどのようなものであるかということではなく、「折りたたみ」そのものの話に立ち返り、折りたたみ携帯電話の「合理性」を探るというものです。まず、折りたたみ式携帯電話の市場実績を見てみますと、IDCの最新データレポートによると、中国の折りたたみ式携帯電話市場は、2023年に約700万7,000台出荷され、前年比114.5%増加する見込みです。その中で、中国の折りたたみ式スクリーン携帯電話市場は、2023 年第 4 四半期に約 277 万 1,000 台を出荷し、前年同期比 149.6% 増加しました。データは良好で、成長も非常に力強いようです。しかし、2023年の中国市場におけるスマートフォン出荷台数約2億7,000万台と比較すると、このデータはまったく不十分です。一般的に
IDC は、2024 年の世界のスマートフォン出荷台数は 12 億台、つまり折り畳み式スクリーンが 2,500 万台となり、前年比 37% 増加すると予測しています。
Feb 24, 2024 pm 02:20 PM
2月24日のニュースによると、IDCは最近市場調査レポートを発表し、世界のスマートフォン出荷台数は2024年に前年比2.8%増の12億台に達し、その後2028年までは一桁台前半の成長を維持すると予測している。 。 IDCは、2024年の全体的な出荷台数は依然としてパンデミック前の水準を下回るものの、世界のスマートフォン市場は底を打ち、回復傾向にあると見ている。 IDC は、市場全体の回復を促進する 2 つの重要な要因は、機器の更新サイクルと新興市場での需要の成長であると考えています。また、主な原動力は 2 つあり、IDC は、折りたたみ式携帯電話の出荷台数が 2024 年に前年比 37% 増の 2,500 万台に達すると予測しています。もう 1 つは、人工知能 (AI) が急速に携帯電話の一部となりつつあることです。スマホでのディスカッション、きっかけ
単語の折りたたみについて知りたいですか?
Mar 19, 2024 pm 07:49 PM
Wordでテキスト内容を編集した後は、編集内容を表示して確認する必要があります。コンテンツが多いと読むのが不便ですが、この問題を解決するには、Word を折りたたむ方法が必要です。メソッドのチュートリアルを皆さんと共有しましょう!まず、コンピュータで Word 文書を開き、必要な内容を入力して選択し、メニュー バーの [開始] オプションをクリックして、選択したテキスト段落に適用するスタイルを選択します。下の図の赤丸で囲った部分をご参照ください。 2. 次に、下の図の赤い丸で示すように、選択したテキスト段落のスタイルが変更され、小さな矢印が追加されます。 3. 小さな矢印をクリックして、前に選択したテキスト段落を自由に展開または折りたたむか、直接右クリックします。 、 から
