LINE2018.12.04flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。表示の切り替え#select-navのa要素をクリックしたら処理を開始します。a').click(function(){//ここに処理を書く});まずはこの部分で空のli要素を消し、残ったli要素はすべて非表示にします。space-between;で並べているため、その行のli要素の数が合わないとレイアウトが崩れてしまうからです。li').hide();次に非表示になったli要素をクリックしたa要素のhref属性に従って処理していきます。この処理に利用するのでクリックするa要素のhref属性には表示させたいクラス名を入れておきましょう。「すべて」の場合はなんでもいいのですが、ここでは.allを入れています。if文を使って「すべて」がクリックされた場合はすべてのli要素を表示。それ以外はhref属性を取得して、そのクラス名だけを表示させます。li').show();}else{//それ以外はhref属性に書かれたクラスだけ表示$($(this).attr('href')).show();}これでクリックした項目だけを絞り込み表示することができます。space-between;と設定しているため、最後の行のli要素の数が合っていないとレイアウトが崩れてしまいます。そこで最後にli要素の数に応じて空のli要素を挿入する処理を加えています。0){$('#list').append('<li></li>');}表示されているli要素の数を.length()を使って取得。今回は1行につきli要素を4つ並べているので、取得した数値を4で割り切れれば最後の行にも4つ並んでいることになります。while文とappend()を使い、余りが0になるまで.li要素を挿入します。おわりにたくさん並んでいる要素に対してちょっと絞り込み機能が欲しいな、というときに使えそうです。プルダウンで選べるようにするなど、工夫しだいでよりよくなると思うのでお試しください。LINEmiyakeiをフォローするmiyakeiおいしいソース関連記事Webデザインスクロールの途中からメニューを上に固定して表示スクロールしても画面からメニューが見えなくならないように上に固定する方法です。<heade...Webデザイン表示時間のメーター付き、クリックでも自動でも切り替わるスライダークリックでも一定時間ごとに自動でも切り替わるスライダーです。どのくらいで切り替わるかもわかるようにメーターも設置しました。切り替えはやメーターの描画はJavaScript(jQuery)で行っています。...Webデザイン整列しているボックスをアニメーションで順番に表示CSSとjQuery(JavaScript)を利用したページ読み込み時に再生されるアニメーションです。CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実...Webデザイン訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用)ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。デモページ...Webデザインクリックで横からスライドして現れるメニュースマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。半透明になっている黒の背景をクリックするとメニューを閉じることができます。...Webデザインサムネクリックで画像を切り替えるレスポンシブのスライダーサムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。コメントをキャンセルメールアドレスが公開されることはありません。RSSWordPress.org。