- 締切済み
jQueryアコーディオンの検索について
jQueryで作成した、アコーディオンの閉じている部分の検索について 色々と検索しましたが、解決できず悩んでいます。 jQueryでアコーディオンを作成しています。 【やりたいこと】 IEで cntrl+ｆでページ内検索した時 １、閉じている箇所の内容も検索する。 2、検索がヒットした場合アコーディオンを開く。 という動きをさせたい。 【知りたいこと】 ＩＥで可能かどうか。 ＩＥの検索で不可の場合 自作の検索フォームを作成すれば、 アコーディオンを開けるか？又その方法。 【疑問点】 IEで検索をすると 検索でヒットした場合文字色と背景色が変わりますが、 html上はその箇所が なんらか変化があったと認識されないのでしょうか？ 最初は、検索が該当したら、javascriptとのイベント（onfocus？）でアコーディオンを開くというような動きができると考えましたが、 動きませんでした。 検索結果の含まれるタグを操作するという動きはできないのでしょうか。。。 もし何かご存じの方がいらっしゃいましたら、教えて頂けないでしょうか。 よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.accordion').click(function() { $(this).next().slideToggle(); }).next().hide(); }); </script> <style type="text/css"> .accordion_head {cursor:pointer;} </style> </head> <body> <div> <h3 class="accordion">アコーディオンのトリガー部分1</h3> <p>アコーディオンする部分1。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分2</h3> <p>アコーディオンする部分2。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分3</h3> <p>アコーディオンする部分3。</p> </div> </body> </html>
- megane5050
- お礼率85% (30/35)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- bvltiggeari
- ベストアンサー率76% (33/43)
こんにちは！ 私も簡単なfunction等は知らないのですが、 方法として参考程度に見ていただければと思います。 > ＩＥで可能かどうか。 可能か不可能かであれば、可能かも？という感じです。 > 自作の検索フォームを作成すれば 以下のようなゴリゴリのjQueryロジックを組んでいけばできるかもしれません。 （あくまでもサンプル程度にお考えください） var inputData = ''; $(document).ready(function(){ $('.accordion').click(function(){ $(this).next().slideToggle(); }).next().hide(); $('body').keypress(function(e){ if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) { var c = String.fromCharCode(e.which); inputData = inputData + c; } else if (e.which == 8) { inputData = inputData.slice(0, -1); } if ('検索対象文字列' == inputData) { $(".accordion").next().slideToggle(); } $('#checks').html(inputData); }); }); 要するにbody内で押下されたボタンを取得して、それを元に 文字列チェックをかます…といった感じです。 ただし、これだと英数字のみです。 また、大文字小文字の区別は難しいかもしれません。 （もっとゴリゴリに組めばShift+も拾えるでしょうが…） > IEで検索をすると 検索でヒットした場合文字色と背景色が変わりますが、 > html上はその箇所が なんらか変化があったと認識されないのでしょうか？ 認識されないと思います。 ブラウザがhtmlで作成していれば認識されるかもですが。
お礼
回答ありがとうございました! 参考にさせて頂き、色々ソースを考えたのですが、 ごりごりかける程の力がなく、今の所閉じている部分を 開かせることはできませんでした。 とりあえずの回避方法として、閉じている部分をすべて開いてから検索という形にしてみました。 もう少しjQuery勉強してみます。 ありがとうございました。