浏览器可以搜索折叠的内容吗？答案

【问题标题】：Can a browser search collapsed content?浏览器可以搜索折叠的内容吗？
【发布时间】：2014-12-19 18:07:26
【问题描述】：

如果我在页面上有一些折叠的、可切换的内容，则进行浏览器搜索将找不到折叠区域中的内容。

有没有办法允许浏览器搜索折叠的内容 (CTRL+F) 并展开特定的可折叠字段？任何折叠/展开方法都可以（JavaScript、jQuery 插件、纯 HTML/CSS 等）只要能满足这个要求。

【问题讨论】：

在这种情况下如何做取决于浏览器开发者。
有办法，只要你的浏览器让你。使用 JavaScript 提供的Events，它将向您的Event 处理函数发送一个Event 对象参数。您将检查Event.keyCode。

标签： javascript jquery html search collapse

【解决方案1】：

我知道这是一个老问题，但我希望这个答案可以帮助登陆此页面的人。

通过一些技巧，是的，我们可以，但可能不适用于您需要的所有布局。

简而言之，我们不使用display:none。相反，我们将容器的高度设置为小（作为窥视孔）并设置padding-top 以便内容在该窥视孔中不可见。当浏览器的 Find 匹配容器内的文本时，浏览器将滚动文本以使其在该窥视孔中可见。

这里是演示：

function toggle(head) {
  head.parentNode.classList.toggle('collapsed');
  head.parentNode.getElementsByClassName('content')[0].scrollTop = 0;
}

.column {
  display: inline-block;
  vertical-align: top;
}
.panel {
  width: 180px;
  background-color: #dddddd;
  margin: 10px;
  overflow: hidden;
}
h3 {
  cursor: pointer;
  margin: 0;
}
.panel .header:before {
  content: '- ';
}
.panel.collapsed .header:before {
  content: '+ ';
}
.panel.collapsed .content {
  height: 0px;
  padding-top: 18px;
  overflow-y: scroll;
  width: 100%;
  padding-right: 17px;
  background-color: white;
}

<div class="column">
    <div class="panel">
      <h3 class="header" onclick="toggle(this)">Head1</h3>
      <div class="content">
        Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”
      </div>
    </div>
    <div class="panel">
      <h3 class="header" onclick="toggle(this)">Head2</h3>
      <div class="content">
        The early universe, lasting around 377,000 years. Initially, various kinds of subatomic particles are formed in stages. These particles include almost equal amounts of matter and antimatter, so most of it quickly annihilates, leaving a small excess of matter in the universe.
      </div>
    </div>
  </div>
  <div class="column">
    <div class="panel column">
      <h3 class="header" onclick="toggle(this)">Head3</h3>
      <div class="content">
        The actual term 'algorithm' is often cited as originated from the 9th Century Persian mathematician Abu Abdullah Muhammad ibn Musa Al-Khwarizmi. Wow, that's quite a name but he's also known as "the father of Algebra". In fact, Al-Khwarizmi built on the work of Brahmagupta.
      </div>
    </div>
    <div class="panel column">
      <h3 class="header" onclick="toggle(this)">Head4</h3>
      <div class="content">
        Machine learning is a method of data analysis that automates analytical model building. It is a branch of artificial intelligence based on the idea that systems can learn from data, identify patterns and make decisions with minimal human intervention.
      </div>
    </div>
  </div>

【讨论】：

【解决方案2】：

我想到的唯一想法是：您可以通过javascript收听CTRL + F键，并展开所有折叠的内容。这样内容就可以搜索了。如果您有很多折叠的项目，展开所有折叠的内容并不优雅

【讨论】：

【解决方案3】：

使用您在<head> 中输入的外部 JavaScript 尝试类似的操作：

//[CDATA[
var pre = onload;
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
E('html_id').onkeydown = function(ev){
  var e = ev || event;
  if(e.ctrlKey && e.keyCode === 70){
    // cntrl+f was pressed - run code showing Element and Element.focus() if needed
  }
}
}
//]]>

【讨论】：