Question

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

是否有办法允许浏览器搜索折叠内容（CTRL + F）并使特定的可折叠字段展开？任何崩溃/扩展方法都很好（JavaScript，jQuery插件，纯HTML / CSS等），只要它能满足这个要求。

Answer 1

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

Answer 2

尝试使用放在<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
  }
}
}
//]]>

Answer 3

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

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

简而言之，我们不使用display：none。相反，我们将容器的高度设置为较小（作为窥视孔），并设置一个填充顶部，以使内容在该窥视孔中不可见。当浏览器的“查找”与容器内的文本匹配时，浏览器将滚动文本以使其在该窥视孔中可见。

这是演示。

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>

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

3 个答案: