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 を応援していただければ幸いです。

以下もご興味があるかもしれません: