2021年3月16日火曜日

リスト項目の絞り込み表示

カテゴリー名リストから選んだカテゴリーと同じカテゴリーのリスト項目のみを絞り込み表示する。

デモページを表示

CSS

補足
  • 絞り込みの対象となるリストの項目は、あらかじめ非表示にしておく。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足
  • このサンプルでは、１ページ内に「カテゴリー名のリスト」と「絞り込みの対象となるリスト」がひとつずつあることを想定している。
  • jQuery の trigger() を使って、最初に表示するカテゴリーを指定している。
  • デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

関連投稿

ラベル: , ,