質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

444閲覧

検索した文字列でアコーディオンを開けるようにしたい

ayumi_03

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/01/03 16:26

検索した文字列でアコーディオンを開けるようにしたい

JQueryのアコーディオンメニューを使ったヘルプ(Q&A)ページを作っています。
アコーディオンメニュー自体はJQueryで実装しているのですが、
さらに、キーワード検索してヒットしたQ&Aを自動で開くようにしたいのですがなかなか実装できず困っています。
どなたかお知恵をお貸しいただければ幸いです。

該当のソースコード

html

1 2<!--検索フォーム--> 3<input id="search" type="text" value="" class="form-control" placeholder="ヘルプの検索"> 4 5 6<!--アコーディオンメニュー--> 7<div> 8 <ul class="accordion" id="accordion"> 9 <li class="according_list"> 10 <h1 class="link">よくある質問</h1> 11 <ul class="submenu"> 12 <li> 13 <h2 class="sublink">質問1</h2> 14 <ul class="submenu_txt"> 15 <li> 16 <p>回答1</p> 17 </li> 18 </ul> 19 </li> 20 </ul> 21 </li> 22 </ul> 23</div>

js

1$(function(){ 2 var Accordion = function(el, multiple) { 3 this.el = el || {}; 4 this.multiple = multiple || false; 5 6 var link = this.el.find('.link'); 7 link.on('click', {el: this.el, multiple: this.multiple},this.dropdown) 8 } 9 10 var subAccordion = function(el, multiple) { 11 this.el = el || {}; 12 this.multiple = multiple || false; 13 14 var sublink = this.el.find('.sublink'); 15 sublink.on('click', {el: this.el, multiple: this.multiple},this.dropdown) 16 } 17 18 Accordion.prototype.dropdown = function(e) { 19 var $el = e.data.el; 20 $this = $(this), 21 $next = $this.next(); 22 23 $next.slideToggle(); 24 $this.parent().toggleClass('open'); 25 26 if(!e.data.multiple){ 27 $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); 28 $el.find('.submenu_txt').not($next).slideUp(); 29 } 30 } 31 subAccordion.prototype.dropdown = function() { 32 var $this = $(this), 33 $next = $this.next(); 34 35 $next.slideToggle(); 36 } 37 var accordion = new Accordion($('#accordion'), false); 38 var accordion = new subAccordion($('#accordion'), false); 39}); 40

試したこと

下記ソースを追加してみましたが全く動作しませんでした。。

js

1$(function(){ 2 var filter = function () { 3 var searchVal = $('#search').val(); 4 $('.according_list, #info .accordion ul li').show(); 5 $('.submenu').hide(); 6 if (searchVal.length === 0) { 7 return; 8 } 9 $('.link').each(function () { 10 var title = $(this); 11 var found = false; 12 title.next('.submenu').find('.#info .accordion ul li').each(function () { 13 var li = $(this); 14 if (li.text().indexOf(searchVal) === -1) { 15 li.hide(); 16 } else { 17 found = true; 18 } 19 }); 20 if (!found) { 21 title.closest('.according_list').hide(); 22 } 23 }); 24 }; 25}); 26 $('#search').change(function (e) { 27 e.preventDefault(); 28 filter(); 29 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問