折りたたみを展開するページの検索/検索

Question

私のチームは拡張可能なボックスを使用して（Confluenceの）wikiの情報を集約しています。これはかなり標準的なものです。display:none/blockを使用しています。私はこれをブラウザの検索機能で動作させたいと思います。私は、max-heightを使ってコンテンツを隠すことに切り替えると、ブラウザが少なくともテキストを正しく見つけることがわかりましたが、その中に一致が見つかると折り畳みを展開して、探していなくなったら再折りたたみたいそれで。それを行う方法はありますか？

私は既にfocusとselectionchangeイベントを利用してみました。私は、ジャンプやキーストロークのスクロールを追跡することができたと思いますが、それらのどちらも、折り畳みがクエリが見つかった場所であるかどうかを私に教えてくれません。

tl; drはブラウザの検出を検出する手段ですか？

更新：

var expand = document.querySelector('.expand'); 
expand.querySelector('.head').addEventListener('click', function(e) { 
//toggle a class .show on .expand 
}) 

そして、私のCSS：ここでは、コードがどのように見えるかのアイデアだ

.expand .body { 
    opacity: 0; 
    max-height: 0; 
    padding: 0 20px 0 40px; 
    transition: all .4s; 
} 
.expand.show .body { 
    max-height: 3000px; 
    opacity: 1; 
    padding: 10px 20px 20px 40px; 
} 

Answer 1

実際にあなたが以下のようにたとえば、Ctrl + Fとしてキー押下の組み合わせを検出することができます

var map = {17: false, 70: false}; 
 
$(document).keydown(function(e) { 
 
    if (e.keyCode in map) { 
 
     map[e.keyCode] = true; 
 
     if (map[17] && map[70]){ 
 
      // FIRE EVENT YOU EVENT 
 
     } 
 
    } 
 
}).keyup(function(e) { 
 
    if (e.keyCode in map) { 
 
     map[e.keyCode] = false; 
 
    } 
 
});