我正在使用 jQuery Accordion 插件来折叠一个大页面。它工作得很好,是压缩页面的好方法,但我注意到,当使用浏览器搜索功能 find (Ctrl+F) 时,它只会在打开的 div
中查找搜索字符串。
有没有办法让浏览器 find 搜索所有 div
(如果找到的话甚至可能打开它们)...我明白为什么这并不简单。搜索必须打开 div
才能显示结果,但这并不明显......
如果没有明显的方法来解决这个问题,那么以编程方式执行此操作的方法是什么?
有什么想法吗?
最佳答案
Accordion 没有简单的解决方案,它的设计理念是一次只能打开一个“翻盖”。但是,如果摆脱该限制,您就可以设计出有效的解决方案。
例如,
$(document).on("keydown", function (e) { if (e.keyCode == 70 && e.ctrlKey) { ... } });
将允许您捕获Ctrlf并先发制人地展开所有隐藏文本。
另一种方法是根本不隐藏文本,而是使其几乎不可见(非常低的不透明度,或在 height:1 div 内,或任何不会阻止查找但仍然有效的方法) hides),然后捕获 select
事件。使用您喜欢的任何技术来查找 DOM 中的位置(例如 http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html ),然后您可以 react 性地展开刚刚选择文本的隐藏部分。
如果您确实成功了,请将您的结果发回此处!
这是一个简单但直接的 Accordion 替代方案,您可以使用它来使 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
}
});
所有襟翼将保持打开状态,直到单击另一个标题,此时它将返回 Accordion 行为。
关于jquery - 使用 jQuery Accordion 时在页面上查找字符串 (Ctrl+F),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14613949/