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

クリック時の要素に基づいて、同じ領域に他の内容を示すjQuery

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

例えば、 WordPress 無料のテーマの一つである ヘキサ右のアイコンをクリックすると、「メニュー」、「ウィジェット」、「検索ボックス」がそれぞれ上から下に降りてきます。
toggle hide show specific elements
次のようなjQueryスクリプトでこのような効果を得ることができます。

$("div#head > div").hide();
$("li a").click(function () {
   $("#" + $(this).attr("class")).siblings().hide();
    $("#" + $(this).attr("class")).slideToggle(500);
});

WordPress 有料テーマに基づいて上記のような効果を自動的に実装するように搭載されている場合がありますが、このような効果をサポートしていない場合、上記のスクリプトを応用して同様の効果を実現することができます。 (注:jsfiddleでうまく動作しますが、実際の環境では、テストしていません。)



コメントを残す

コメント