在使用jQuery手风琴时，在页面上查找字符串(Ctrl+F)

I am using jQuery accordion plugin to collapse a large page. It works nicely and is a great way to compact the page but I noticed that when using the Browser search function find (Ctrl+F) it only looks in the open div for the search string.

我正在使用jQuery手风琴插件来折叠一个大页面。它工作得很好，而且是压缩页面的好方法，但是我注意到，当使用浏览器搜索函数find (Ctrl+F)时，它只在open div中查找搜索字符串。

Is there a way to get the browser find to search through all the divs (and maybe even open them if found)... I see why this is not trivial. The search would have to open the divs to show results and this is not obvious...

有没有一种方法可以让浏览器搜索所有的div(如果找到的话，甚至可以打开它们)……我明白为什么这不是小事。搜索将不得不打开divs来显示结果，这并不明显……

If there isn't an obvious way to get around this, what would be the approach to doing this programatically?

如果没有一种明显的方法来解决这个问题，那么用程序来解决这个问题的方法是什么呢?

Any ideas?

什么好主意吗?

2 个解决方案

#1

There is no easy solution for an accordion, which is designed around the concept that only one "flap" can be open at a time. But you can devise solutions that work if you get rid of that restriction.

手风琴没有简单的解决方案，它的设计理念是每次只能打开一个“皮瓣”。但是如果你摆脱了这个限制，你可以设计出可行的解决方案。

For example,

例如,

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

will allow you to trap Ctrlf and pre-emptively expand all your hidden text.

将允许您捕获ctrl键并预先扩展所有隐藏的文本。

Another approach is not to actually hide your text at all, but make it very nearly invisible (very low opacity, or inside a height:1 div, or whatever does not block find but still effectively hides), and then trap the select event. Using whatever technique you prefer to find your position in the DOM (e.g. http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html) you can then reactively expand the hidden section in which text was just selected.

另一种方法是完全不隐藏文本，而是使其几乎不可见(非常低的不透明度，或者在高度:1 div中，或者任何不阻塞查找但仍然有效隐藏的内容)，然后捕获select事件。使用您喜欢的任何技术来找到您在DOM中的位置(例如http://mark.koli.ch/2009/09/use-javascript-and- jquerto -get-user-selected-text.html)，然后您可以重新展开刚才选中的文本的隐藏部分。

If you do get it working, post back here with your results!

如果你成功了，把你的结果发回来!

Here's a simple but straightforward alternative to accordions with which you can make the ctrl-f event trick work.

这里有一个简单但直接的方法，可以让您可以使用它来实现ctrl-f事件。

In your HTML you can structure it like so:

在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>

Style the h1 elements to taste, ensure you give them things like cursor: pointer and the appropriate background-color to indicate that these are clickable, e.g.:

设计h1元素的样式，确保给它们一些东西，如光标:指针和适当的背景颜色，以表明这些元素是可点击的，例如:

.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;
}

In your Javascript:

在你的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
   }
});

All the flaps will remain open until another header is clicked, when it will return to accordion behavior.

所有的褶叶将保持打开状态，直到另一个页眉被单击，这时它将返回到手风琴行为。

#2

I went with this option, as described elsewhere:

我选择了这个选项，正如其他地方所描述的:

Toggle Entire Accordion Functionality with Link or Button

用链接或按钮切换整个手风琴功能

I give the user an option to toggle the accordion all together and then they can search with Ctrl+F.

我给用户一个选项来切换手风琴，然后他们可以使用Ctrl+F进行搜索。

#1