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

我的团队正在使用可扩展框来浓缩我们wiki上的信息（在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; 
}

来源

2016-12-06 Airhogs777

请添加一些代码。如果我们可以看到 –

可能重复[有没有一种方法来检测页面上的查找搜索在JavaScript中]（http://stackoverflow.com/questions/6680213/is-有一个方法来检测在JavaScript中寻找在页面上搜索） –

其实你可以检测按键组合，如Ctrl + F像下面

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

来源

2016-12-06 17:24:05

是的，但不会告诉我，如果我的可折叠内有东西 – Airhogs777

它也不会帮助，如果用户从编辑菜单中选择查找，而不是按Ctrl + F。 –

是的，在这种情况下肯定不会有帮助，请记住，在处理Web应用程序时，我们无法控制这些内容。 –

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

回答

相关问题