我正在使用 jQuery 手风琴插件来折叠一个大页面。它工作得很好，是压缩页面的好方法，但我注意到当使用浏览器搜索功能查找 (Ctrl+F) 时，它只会在打开的 div 中查找搜索字符串。
有没有办法让浏览器找到搜索所有divs（如果找到，甚至可能打开它们）...我明白为什么这不是微不足道的。搜索必须打开divs 才能显示结果，这并不明显......
如果没有明显的方法来解决这个问题，那么以编程方式执行此操作的方法是什么？
有什么想法吗？
【问题讨论】：
手风琴没有简单的解决方案，其设计理念是一次只能打开一个“翻盖”。但是，如果您摆脱了这种限制，您就可以设计出可行的解决方案。
例如，
$(document).on("keydown", function (e) { if (e.keyCode == 70 && e.ctrlKey) { ... } });
将允许您捕获 Ctrlf 并先发制人地展开所有隐藏的文本。
另一种方法是根本不真正隐藏您的文本，而是使其几乎不可见（非常低的不透明度，或在高度：1 div 内，或任何不会阻止查找但仍然有效的东西隐藏），然后捕获select 事件。使用您喜欢的任何技术来查找您在 DOM 中的位置（例如 http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html），您就可以反应性地展开刚刚选择文本的隐藏部分。
如果您确实成功了，请在此处发布您的结果！
这是一个简单但直接的手风琴替代方案，您可以使用它使 ctrl-f 事件技巧起作用。
在您的 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>
为h1 元素设置样式以进行品味，确保为它们提供cursor: pointer 和适当的background-color 之类的东西，以表明它们是可点击的，例如：
.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;
}
在您的 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
}
});
所有襟翼都将保持打开状态，直到单击另一个标题时，它将返回手风琴行为。
【讨论】：
divs 全部展开），允许用户使用 Ctrl + F 进行搜索，然后他们可以将手风琴切换回来如果他们愿意。否则，页面刷新手风琴将恢复。
我选择了这个选项，如其他地方所述：
Toggle Entire Accordion Functionality with Link or Button
我为用户提供了一个选项来切换手风琴，然后他们可以使用 Ctrl+F 进行搜索。
【讨论】：