ホームページ > 記事 > ウェブフロントエンド > jqueryクリックして展開折りたたむテキストの置換
jqueryクリックして展開折りたたむテキストの置換
- PHPzオリジナル
- 2023-05-18 14:59:39562ブラウズ
jQuery クリックしてテキストを展開/折りたたみます。
Web デザインでは、リストの展開、ドロップダウン ボックスのオプション、記事の詳細など、展開/折りたたみ機能を使用する必要がよくあります。この機能はjQueryを使えば比較的簡単に実装できるので、具体的な実装方法を見てみましょう。
- HTML 構造
最初に HTML 構造を構築しましょう。ここでは例としてリスト展開を取り上げます。HTML 構造は次のようになります:
<ul class="list">
<li>
<h3>标题1</h3>
<div class="content">内容1</div>
</li>
<li>
<h3>标题2</h3>
<div class="content">内容2</div>
</li>
<li>
<h3>标题3</h3>
<div class="content">内容3</div>
</li>
</ul>where , 各リスト項目にはタイトルとコンテンツが含まれています。デフォルトではタイトルのみが表示され、コンテンツ部分をクリックして展開する必要があります。
- CSS スタイル
次に、タイトルとコンテンツが通常どおりに表示され、区別できるように、CSS スタイルを設定します。
.list li {
margin-bottom: 10px;
}
.list li h3 {
color: #333;
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
}
.list li .content {
display: none;
margin-left: 20px;
font-size: 14px;
line-height: 1.5;
}Hereタイトルのスタイルを手の形に設定して、クリックして展開できることを示す必要があります。コンテンツ部分はデフォルトで非表示になっているため、表示属性を none に設定する必要があります。
- jQuery スクリプト
次のステップは重要な部分です。jQuery を使用して、タイトルをクリックして展開/縮小する機能を実現する必要があります。具体的な実装方法は次の手順に分けることができます。
- クリック イベント リスナーの追加: 各タイトルにクリック イベント リスナーを追加し、ユーザーがクリックしたときにイベントをトリガーします。
$('.list li h3').click(function() {
// to do
});- 対応するコンテンツ パーツを検索する: jQuery のセレクターを通じて対応するコンテンツ パーツを検索し、それを表示または非表示にします。
$('.list li h3').click(function() {
var content = $(this).siblings('.content');
if (content.is(':visible')) {
content.hide();
} else {
content.show();
}
});- タイトルテキストの変更: コンテンツの表示状況に応じて、タイトルテキストを変更し、「展開」を「縮小」に置き換えます。
$('.list li h3').click(function() {
var content = $(this).siblings('.content');
if (content.is(':visible')) {
content.hide();
$(this).text($(this).text().replace('收起', '展开'));
} else {
content.show();
$(this).text($(this).text().replace('展开', '收起'));
}
});この時点で、単純な jQuery のクリックによる展開/折りたたみ関数が完成しました。完全なコードについては、次の例を参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 点击展开/收起文字替换</title>
<style>
.list li {
margin-bottom: 10px;
}
.list li h3 {
color: #333;
cursor: pointer;
font-size: 16px;
margin-bottom: 5px;
}
.list li .content {
display: none;
margin-left: 20px;
font-size: 14px;
line-height: 1.5;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.list li h3').click(function() {
var content = $(this).siblings('.content');
if (content.is(':visible')) {
content.hide();
$(this).text($(this).text().replace('收起', '展开'));
} else {
content.show();
$(this).text($(this).text().replace('展开', '收起'));
}
});
});
</script>
</head>
<body>
<ul class="list">
<li>
<h3>标题1</h3>
<div class="content">内容1</div>
</li>
<li>
<h3>标题2</h3>
<div class="content">内容2</div>
</li>
<li>
<h3>标题3</h3>
<div class="content">内容3</div>
</li>
</ul>
</body>
</html>上記は、jQuery を使用してクリック展開/折りたたみ機能を実装し、同時にタイトル テキストを変更する実装方法です。この簡単な例を通して、jQuery を使用すると、いくつかの一般的なページ インタラクション効果をより迅速に完了できると同時に、ユーザー エクスペリエンスも向上することがわかります。
以上がjqueryクリックして展開折りたたむテキストの置換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。