6

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

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

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

有任何想法吗?

4

2 回答 2

6

手风琴没有简单的解决方案,它的设计理念是一次只能打开一个“襟翼”。但是,如果您摆脱了这种限制,您就可以设计出可行的解决方案。

例如,

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

在单击另一个标题之前,所有襟翼将保持打开状态,此时它将返回手风琴行为。

于 2013-02-02T02:33:35.493 回答
0

我选择了这个选项,如其他地方所述:

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

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

于 2013-02-09T01:07:31.563 回答