6

大きなページを折りたたむためにjQueryアコーディオンプラグインを使用しています。これはうまく機能し、ページを圧縮するための優れた方法ですが、ブラウザーの検索機能を使用すると (Ctrl+F)、開いdivている検索文字列しか表示されないことに気付きました。

ブラウザの find にすべての s を検索させる方法はありdivますか (見つかった場合は開くこともできます)...これが簡単ではない理由がわかります。検索では、結果を表示するために s を開く必要がdivあり、これは明らかではありません...

これを回避する明白な方法がない場合、プログラムでこれを行うにはどうすればよいでしょうか?

何か案は？

4

2 に答える 2

6

一度に開くことができる「フラップ」は 1 つだけであるというコンセプトに基づいて設計されたアコーディオンには、簡単な解決策はありません。しかし、その制限を取り除けば、機能するソリューションを考案できます。

例えば、

$(document).on("keydown", function (e) { if (e.keyCode == 70 && e.ctrlKey) { ... } });

すべての非表示のテキストをトラップCtrlfして先制的に展開することができます。

もう 1 つの方法は、テキストを実際にまったく非表示にせず、ほぼ非表示 (不透明度が非常に低い、高さ 1 の div 内、または検索をブロックしないが効果的に非表示になるもの) にしてから、selectイベントをトラップすることです。DOM 内で自分の位置を見つけるのに好きな手法 (例: http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html ) を使用して、次のことができます。次に、テキストが選択された非表示のセクションを反応的に展開します。

うまくいった場合は、結果をここに投稿してください。

これは、ctrl-f イベント トリックを機能させることができる、アコーディオンに代わる単純ですが直接的な方法です。

HTML では、次のように構成できます。

<div class="booklet">
   <h1>Header 1</h1>
   <div>Content in this flap</div>
   <h1>Header 2</h1>
   <div>Content in this flap</div>
   <h1>Header 3</h1>
   <div>Content in this flap</div>
</div>

h1好みに合わせて要素のスタイルを設定し、次のようなものを指定して、クリック可能であることを示すcursor: pointer適切なものを指定してください。background-color

.booklet h1
{
   cursor:pointer;
   background-color:#3cf;
   color:white;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   padding:5px;
}
.booklet div
{
   display:none;
   border: 1px solid #3cf;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   padding:5px;
}

あなたのJavascriptで：

$('.booklet').on("click", "h1", function()
{
   $('.booklet div').hide();
   $(this).next("div").show(); // acts like accordion, animate to taste
});
$('.booklet div').first().show(); // open first flap of accordion to begin

$(document).on("keydown", function (e)
{
   if (e.keyCode == 70 && e.ctrlKey) // ctrl+f
   {
      $('.booklet div').show(); // show all flaps
   }
});

別のヘッダーがクリックされると、アコーディオン動作に戻るまで、すべてのフラップが開いたままになります。

于 2013-02-02T02:33:35.493 に答える
0

他の場所で説明されているように、このオプションを使用しました。

リンクまたはボタンでアコーディオン機能全体を切り替える

アコーディオンをすべて一緒に切り替えるオプションをユーザーに提供し、Ctrl+F で検索できるようにします。

于 2013-02-09T01:07:31.563 に答える