jQueryはアコーディオン効果を実装します

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

jQuery エフェクトを使用します (次のように機能します)。

コード(チェーンプログラミング):

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<script src="../jquery-3.4.1.min.js"></script>
<スタイル タイプ="text/css">
* {
マージン: 0;
パディング: 0;
}

画像 {
表示: ブロック;
}

ul {
リストスタイル: なし;
}

。王 {
幅: 852ピクセル;
マージン: 100px 自動;
背景: url(../images/bg.png) 繰り返しなし;
オーバーフロー: 非表示;
パディング: 10px;
}

.キングul{
オーバーフロー: 非表示;
}

.キング・リー{
位置: 相対的;
フロート: 左;
幅: 69px;
高さ: 69px;
右マージン: 10px;
}

.king li.current {
幅: 224ピクセル;
}

.king li.current .big {
表示: ブロック;
}

.king li.current .small {
表示: なし;
}

。大きい {
幅: 224ピクセル;
表示: なし;
}

。小さい {
位置: 絶対;
上: 0;
左: 0;
幅: 69px;
高さ: 69px;
境界線の半径: 5px;
}
</スタイル>
</head>

<本文>
<div class="キング">
<ul>
<li class="current">
<a href="#" >
<img src="../images/m1.jpg" alt="" class="small">
<img src="../images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/l1.jpg" alt="" class="small">
<img src="../images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/c1.jpg" alt="" class="small">
<img src="../images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/w1.jpg" alt="" class="small">
<img src="../images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/z1.jpg" alt="" class="small">
<img src="../images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/h1.jpg" alt="" class="small">
<img src="../images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/t1.jpg" alt="" class="small">
<img src="../images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>

</本文>
<スクリプト>
$(関数() {
//1. マウスが小さい li の上を通過すると、2 つのステップがあります。現在の小さい li の幅が 225px になり、内部の小さい画像がフェードアウトし、大きい画像がフェードインします。 //2. 残りの兄弟要素である小さい li の幅が 69px になり、小さい画像がフェードインし、大きい画像がフェードアウトします。 $(".king li").mouseenter(function() {
$(this).stop().animate({
幅: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
幅: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</スクリプト>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery Easyui の使い方 (I) 折りたたみパネルレイアウトのアコーディオンメニュー
  • アコーディオンパネル効果を作成するためのjQueryプラグイン
  • jQueryで素晴らしいアコーディオンメニューが作れる
  • jQuery で実装されたシンプルなアコーディオン効果の例
  • JQuery コードに基づくアコーディオン メニューの実装
  • jQueryのslideDownとslideUpをベースにアコーディオンを作る
  • アコーディオン効果を実現するための jQuery のサンプルコード
  • jQuery アコーディオン特殊効果プラグイン
  • JQuery コンポーネント easyUi はアコーディオン (折りたたみパネル) の例を実装します
  • アコーディオン効果を実現するjQuery

<<:  iviewは動的なフォームとカスタム検証期間の重複を実装します

>>:  jQueryはショッピングカートの完全な機能を実現します

推薦する

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

Vue プロジェクトを使用して複数のプロキシを構成する際の注意事項

Vue プロジェクトの開発プロセスでは、ローカル デバッグの利便性のため、通常、vue.config...

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

MySQL デッドロック シナリオ例の分析

序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

効果的なウェブフォームのための 8 つのルール

ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...

Mysql接続数の設定と取得方法

接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...

JavaScript を使用して動的な QQ 登録ページを作成する

目次1. はじめに1. 基本レイアウト2. 写真を自動的に切り替える3. コンテンツを追加する4. ...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

JavaScript ツールチェーンの不完全なガイド

目次概要静的型チェックコードスタイルチェック(Linter)パッケージマネージャーモジュールローダー...

インターフェース設計の10の一般的なルール

<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル (Windows の場合)

この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

MySQL でグループ化した後、各グループの最大値を取得する詳細な例

MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...

カタツムリ映画システムのDocker展開の詳細なプロセス分析

環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....