- 締切済み
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で作成していれば認識されるかもですが。
関連するQ&A
- jqueryアコーディオンの上部のみ表示方法
現在下記のような、下に開閉するアコーディオンを作成しています。 動き的にはうまく行っているのですが、 「１行目」「２行目」は表示させておき「３行目」から同様の動きに変更したいのですが、 どのようにすればよろしいでしょうか。 （できれば「１、２行目」の見せる部分と「３行目」の閉じている部分は<div>などで分けたくないのです。） heightなどで高さを指定して２行分を表示させるやり方でも構いません。 教えてくださいお願い致します。 ------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".more").css('cursor', 'pointer').click(function(){ $(this).prev(".detail").slideToggle('slow'); $(this).toggleClass("active"); return false; }); }); </script> <style type="text/css"> body{margin:0;padding:0;} .box { width: 500px; } .more { width: 500px; height: 20px; background: #ccc; text-align:center } .more_box.active { width: 500px; height: 20px; background: #DCDCDC; } .detail_more { display: none; } </style> </head> <body> <div class="box"> <div class="detail"> <p>1行目1行目1行目1行目1行目1行目1行目</p> <p>2行目2行目2行目2行目2行目2行目2行目</p> <p>3行目3行目3行目3行目3行目3行目3行目</p> <p>4行目4行目4行目4行目4行目4行目4行目</p> <p>5行目5行目5行目5行目5行目5行目5行目</p> </div> <div class="more">全文表示</div> </div> </body> </html> ------------------------------------------------------------------------
- 締切済み
- JavaScript
- アコーディオンjquery
ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか？ --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>
- 締切済み
- JavaScript
- 【ｊQuery】スマフォサイトのアコーディオン
スマートフォンサイトで使用するアコーディオンについて 下記サイトのものを参考に制作しています。 http://07design.net/blog/?p=477 こちらのスクリプトでは、一つのコンテンツをクリックして、 もう一度クリックしない限り開いたままの状態になりますが、 一つのコンテンツが開かれている場合、 その他のコンテンツを閉じるように動作させることは可能でしょうか？ イメージ的にはこちらのサイトにあるようなものです。 http://www.geekzshu.com/jquery/975 どなたか解決策がお解かりの方がおられましたら 宜しくお願いいたします。 ■html <section class="list"> <div class="acordion"> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> </div> </section> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header: "h3", collapsible:true, animated: 'bounceslide' , autoHeight:false, active:10 }); }); </script> ■javascript $(document).ready(function(){ //acordion_treeを一旦非表示に $(".acordion_tree").css("display","none"); //triggerをクリックすると以下を実行 $(".trigger").click(function(){ //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら if($("+.acordion_tree",this).css("display")=="none"){ //classにactiveを追加 $(this).addClass("active"); //直後のacordion_treeをスライドダウン $("+.acordion_tree",this).slideDown("normal"); }else{ //classからactiveを削除 $(this).removeClass("active"); //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ $("+.acordion_tree",this).slideUp("normal"); } }); });
- ベストアンサー
- JavaScript
- jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!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=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？ 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
- jQuery多層式アコーディオンメニューについて。
javascript勉強中です。 jQueryを使っての多層式アコーディオンメニューですが、現在hoverでメニューが開く仕様になっています。 これをclickすることで開くようにするにはどうしたらいいか、アドバイスいただければ幸いです。 <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('ul.main li').hover(function(){ $('>ul:not(:animated)',this).slideDown('fast') },function(){ $('>ul',this).slideUp('fast'); }); }); </script> <style> ul.sub, ul.sub ul.sub{display:none;} </style> </head> <body> <ul class="main clearfix"> <li><a href="#">メニュー1</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> <li><a href="#">メニュー2</a> <ul class="sub"> <li><a href="#">サブ1-1</a> <ul class="sub"> <li><a href="#">サブ1A-1</a></li> </ul> </li> <li><a href="#">サブ1-2</a></li> </ul> </li> </ul> </body> </html> 何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { width: 640px; height: 415px; margin: 0; padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
- jqueryについて質問です。
jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html
- 締切済み
- JavaScript
- JQuery の CrossSlideを設置したのですが IEでだけ表示できません。
JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。 ブラウザのエラーでは 「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」 とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。 ソース -head- <!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=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...
- ベストアンサー
- JavaScript
- slideToggleを複数のボタンで適用したい
jQueryのslideToggleについての質問です。 以下のようなコードがあるとします。 <!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>jQuery show/hide</title> <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>「見出し１」</h3> <div>見出し１のコンテンツ...……<div class="class-name">コンテンツを閉じる</div></div> </div> </body> </html> 「見出し１」をクリックすると見出し１のコンテンツが表示されます。 もう一度「見出し１」をクリックすると見出し１のコンテンツが隠されます。 ・見出し１のコンテンツが表示されている状態で、「見出し１」をクリックする ・見出し１のコンテンツが表示されている状態で、「コンテンツを閉じる」をクリックする の2通りの場合で見出し１のコンテンツが隠されるようにしたいのですが、jqueryをどのように書き替えたらいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!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> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>
- 締切済み
- JavaScript
お礼
回答ありがとうございました! 参考にさせて頂き、色々ソースを考えたのですが、 ごりごりかける程の力がなく、今の所閉じている部分を 開かせることはできませんでした。 とりあえずの回避方法として、閉じている部分をすべて開いてから検索という形にしてみました。 もう少しjQuery勉強してみます。 ありがとうございました。