アコーディオン機能(コンテンツ・ドロップ/折り畳みトグル)jQuery II

Last Updated:2023年07月16日| | コメントを残す

前に説明したjQueryコードを応用して、アイテムをクリックすると、他の項目はすべて非表示に変更されたバージョンです。 視覚効果賞に表示やすいようにslideUp()を利用しました。

$(document).ready(function() {
jQuery(".content").hide();
//content 클래스를 가진 div를 표시/숨김(토글)
$(".heading").click(function()
{
$(".content").not($(this).next(".content").slideToggle(500)).slideUp();
});
});

(*注: WordPressで上記のコードを使用する場合$を一括的にjQueryを変更してください。)

追加:

上記は、少し異なって idclass 要素にシリアル番号(例えば、 menu1、menu2、menu3...)がついた場合 CSSプロパティセレクタを使用して、idとclassを指定します。

$(document).ready(function() {
$('[id^=showmenu]').click(function() {
$('[class^=menu]').not($(this).next('[class^=menu]').slideToggle("slow")).hide(); // 현재 선택한 항목 다음의 하위 항목을 제외한 모든 항목을 축소합니다.
});
});

hide() 代わりに slideUp()を使用すると、良い効果を得ることができます(参照). .not メソッドの詳細については ここを参照してください。


コメントを残す

コメント

割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy