问题
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.
Is there a way to get the browser find to search through all the div
s (and maybe even open them if found)... I see why this is not trivial. The search would have to open the div
s to show results and this is not obvious...
If there isn't an obvious way to get around this, what would be the approach to doing this programatically?
Any ideas?
回答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.
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.
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.
In your HTML you can structure it like so:
<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.:
.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:
$('.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.
来源:https://stackoverflow.com/questions/14613949/find-string-on-page-ctrlf-when-jquery-accordion-in-use