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

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

ただいまの
回答率

90.35%

  • jQuery

    8762questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 1,755

mari-t

score 11

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ここまで-->
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

$("#word_search").on("submit", function(e){
    var $categories = $("dl.accordion dt");
    var word = $("#searchbox").val();
    
    e.preventDefault();
    $categories.each(function(){
        
        if ($(this).html().indexOf(word) !== -1) {
            
            var $parents = $(this).parents("dl.accordion");
            var reversed = $parents.get().reverse();
            
            $(reversed).each(function(){
                var $dt = $(this).children("dt");
                $dt.addClass("active");
                $dt.next("dl.accordion dd").slideDown("slow");
                
            });
        }
    });
});
<form id="word_search" action="#">
    <input type="text" id="searchbox"/>
    <button type="submit">検索</button>
</form>
無理やり感ありますが、一応これで動きました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/21 18:02

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

    キャンセル

  • 2015/04/21 18:04

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

    キャンセル

  • 2015/04/21 20:12

    お返事が遅くなりました。
    まずコードの追加位置ですが、
    $("#word_search").on("submit", function(e){
    の直後の間違いでした。申し訳ありません。

    $('dl.accordion dt').removeClass("active");
    $('dl.accordion dd').hide();

    と追記して試してみたところ、上記のソースで動作しました。
    度々の質問で申し訳ありませんでした。ありがとうございました!

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    8762questions

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