検索した文字列でアコーディオンを開けるようにしたい
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 });
あなたの回答
tips
プレビュー