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はショッピングカートの完全な機能を実現します

推薦する

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。

この記事では主に、Vue で TodoList をカプセル化するケースと、ブラウザのローカル キャッ...

リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法

これは主に、場所パラメータのif判断の設定ジャンプです。迂回により、サーバーの負荷と圧力を軽減できま...

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

HTMLコードテキストボックスの制限入力テキストボックスが灰色になり、制限テキストボックスの入力

方法 1: readonly 属性を true に設定します。入力値=読み取り専用 readOnly...

CUDA10.0 のインストールと Ubuntu での問題

Tensorflow バージョンと Cuda および CUDNN の対応: https://tens...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを忘れた場合の解決策: [root@localhost ~]# mysql -...

Windows 10 での MySQL 8.0.11 圧縮バージョンのインストール チュートリアル

この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...