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

Question

我正在使用jQuery手风琴插件来折叠大页面.它运行良好,是一个压缩页面的好方法,但我注意到,当使用浏览器搜索功能查找(Ctrl + F)时,它只查看打开div搜索字符串.

有没有办法让浏览器找到搜索所有divs(甚至可能打开它们,如果找到)...我明白为什么这不是微不足道的.搜索必须打开divs才能显示结果,这并不明显......

如果没有明显的方法来解决这个问题,那么以编程方式执行此操作的方法是什么？

有任何想法吗？

Answer 1

手风琴没有简单的解决方案,围绕这样的概念设计,一次只能打开一个"翻盖".但是,如果你摆脱了这种限制,你可以设计出有效的解决方案.

例如,

$(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
   }
});

所有襟翼将保持打开,直到点击另一个标题,此时它将返回手风琴行为.

Answer 2

我选择了这个选项，如其他地方所述：

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

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