ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

前に説明した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 メソッドの詳細については ここを参照してください。



コメントを残す

コメント