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

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

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

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

Q&A

解決済

1回答

4948閲覧

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

mari-t

総合スコア12

jQuery

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

1グッド

2クリップ

投稿2015/04/20 14:20

JQueryのアコーディオンメニューを使った製品リストを作っています。
アコーディオンメニュー自体はJQueryで実装してあったのですが、
さらに機能追加として、
「商品名で検索してヒットしたメニューを自動で開くようにして欲しい」との
依頼が来てしまいました。

JavascriptもJQueryも初心者のため、
実装方法が全く分からず困っています。
どなたかお知恵をお貸しいただければ幸いです。

[JQuery]
<script type="text/javascript">
$(document).ready(function(){
// 交互
$("dl.accordion>dd>ul li:nth-child(odd)").addClass("odd");
$("dl.accordion>dd>ul li:nth-child(even)").addClass("even");

//アコーディオン jQuery('dl.accordion dd').hide(); jQuery('dl.accordion dt').click(function() { var $this = jQuery(this); if ($this.hasClass('active')) { $this.removeClass('active'); }else{ $this.addClass('active'); } $this.next('dl.accordion dd').slideToggle('slow'); }); jQuery( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); }); </script>

[html]

<!--wrapここから--> <div id="wrap">
<!--どうぶつここから--> <dl class="accordion"> <dt>+どうぶつ</dt> <dd> <!--ねこ ここから--> <dl class="accordion"> <dt><span>+</span>ねこ</dt> <dd> <!--三毛猫ここから--> <dl class="accordion"> <dt><span>+</span>三毛猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--三毛猫ここまで--> <!--シャム猫ここから--> <dl class="accordion"> <dt><span>+</span>シャム猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--シャム猫ここまで--> <!--黒猫ここから--> <dl class="accordion"> <dt><span>+</span>黒猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--黒猫ここまで--> <!--山猫ここから--> <dl class="accordion"> <dt><span>+</span>山猫</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--山猫ここまで--> </dd> </dl> <!--ねこ ここまで--> <!--いぬ ここから--> <dl class="accordion"> <dt><span>+</span>いぬ</dt> <dd> <!--柴犬ここから--> <dl class="accordion"> <dt><span>+</span>柴犬</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--柴犬ここまで--> <!--ハスキーここから--> <dl class="accordion"> <dt><span>+</span>ハスキー</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ハスキーここまで--> <!--ブルドッグここから--> <dl class="accordion"> <dt><span>+</span>ブルドッグ</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ブルドッグここまで--> <!--ゴールデンレトリバーここから--> <dl class="accordion"> <dt><span>+</span>ゴールデンレトリバー</dt> <dd> <div class="spec_box clearfix"> 詳しい内容が入ります </div> </dd> </dl> <!--ゴールデンレトリバーここまで--> </dd> </dl> <!--いぬ ここまで--> </dd> </dl> <!--どうぶつ ここまで-->
</div> <!--wrapここまで-->
buttobi028👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

lang

1$("#word_search").on("submit", function(e){ 2 var $categories = $("dl.accordion dt"); 3 var word = $("#searchbox").val(); 4 5 e.preventDefault(); 6 $categories.each(function(){ 7 8 if ($(this).html().indexOf(word) !== -1) { 9 10 var $parents = $(this).parents("dl.accordion"); 11 var reversed = $parents.get().reverse(); 12 13 $(reversed).each(function(){ 14 var $dt = $(this).children("dt"); 15 $dt.addClass("active"); 16 $dt.next("dl.accordion dd").slideDown("slow"); 17 18 }); 19 } 20 }); 21});

lang

1<form id="word_search" action="#"> 2 <input type="text" id="searchbox"/> 3 <button type="submit">検索</button> 4</form>

無理やり感ありますが、一応これで動きました。

投稿2015/04/20 15:09

htsign

総合スコア870

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

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

mari-t

2015/04/20 15:27

ありがとうございます。 こちらのJavascriptは元からあるJavascriptの <script type="text/javascript">~</script>の中に 追記する形でよろしいでしょうか。 追記する形で
htsign

2015/04/20 15:29

$(document).ready(function(){ }); の中に書き加えてください。
mari-t

2015/04/20 15:33

無事動きました。有難うございます。 本当に困っていたので助かりました。
htsign

2015/04/20 23:07

私が組んだ方法は検索効率が悪いため、アイテム数が多いのであればDBやサーバサイド言語と組み合わせることも検討した方が良いと思います。 それから、解決したのであれば、解決済みにしていただけると助かります。
mari-t

2015/04/21 06:11

追加の質問で申し訳ありません。 検索のたびに一度アコーディオンを全て閉じてから結果を表示するようにしたくて、 $('dl.accordion dd').hide(); を $(document).ready(function(){ の直後に追記したのですが、 動きは希望通りになったのですが、前に検索したキーワードのdtの activeクラスが外れません。 (cssで背景色が変わるようになっているのですが、アコーディオンが閉じても 背景色がactiveで指定した状態のまま) $('dl.accordion dd').removeClass("active"); を直前、直後に追記しても結果は一緒でした。 この場合、JQueryはどのように記述すればよいでしょうか。
htsign

2015/04/21 09:02

お返事頂いていたことに気づくのが遅れました。失礼しました。 dt要素の active クラスを外すのであれば、セレクタはdtを指す必要があります。 $('dl.accordion st') とすればどうでしょうか?
htsign

2015/04/21 09:04

typoです。重ねて申し訳ありません。 $('dl.accordion dt').removeClass("active"); こうですね。
mari-t

2015/04/21 11:12

お返事が遅くなりました。 まずコードの追加位置ですが、 $("#word_search").on("submit", function(e){ の直後の間違いでした。申し訳ありません。 $('dl.accordion dt').removeClass("active"); $('dl.accordion dd').hide(); と追記して試してみたところ、上記のソースで動作しました。 度々の質問で申し訳ありませんでした。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問