Question

我的团队正在使用可扩展的框来压缩我们维基上的信息（在Confluence中），使用display:none/block非常标准。我希望这可以使用浏览器的查找功能。我发现当我切换到使用max-height隐藏内容时，浏览器至少会正确找到文本，但我想在其中找到匹配时展开可折叠，并在找到时重新折叠它不再看它。有没有办法做到这一点？

我已经尝试过focus和selectionchange事件无济于事。我想我可以跟踪滚动跳转或跟踪击键，但这些都没有真正告诉我是否可以找到查询的可折叠位置。

tl; dr有没有办法检测浏览器查找？

更新：以下是代码的概念：

var expand = document.querySelector('.expand');
expand.querySelector('.head').addEventListener('click', function(e) {
 //toggle a class .show on .expand
})

我的CSS：

.expand .body {
    opacity: 0;
    max-height: 0;
    padding: 0 20px 0 40px;
    transition: all .4s;
}
.expand.show .body {
    max-height: 3000px;
    opacity: 1;
    padding: 10px 20px 20px 40px;
}

Answer 1

实际上你可以检测按键组合，如下面的Ctrl + F

＆＃13;

var map = {17: false, 70: false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[17] && map[70]){
            // FIRE EVENT YOU EVENT
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

＆＃13;

检测页面查找/搜索以展开可折叠

1 个答案: