文章/答案/技术大牛

发布

社区首页 >问答首页 >浏览器可以搜索折叠的内容吗？

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

Stack Overflow用户

提问于 2014-10-24 06:54:28

回答 3查看 1.4K关注 0票数 2

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

javascript

jquery

html

collapse

回答 3

Stack Overflow用户

发布于 2019-10-03 15:03:21

我知道这是一个古老的问题，但我希望这个答案能帮助到这个页面的人。

用一些技巧，是的，我们可以，但可能不是你需要的所有布局都有效。

简而言之，我们不使用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

Stack Overflow用户

发布于 2014-10-24 07:10:29

我脑海中浮现的唯一想法是:你可以通过javascript监听CTRL+F键，然后展开所有折叠的内容。这样，内容就可以进行搜索了。如果您有许多折叠的项目，展开所有折叠的内容将不是一件优雅的事情

票数 1

Stack Overflow用户

发布于 2014-10-24 07:23:41

尝试这样做，使用您放入<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
  }
}
}
//]]>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26538831

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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