【子比小功能】绑定键盘按键显示隐藏内容【最终版】

思路

1. 在WordPress编辑器中添加隐藏内容：可以在WordPress编辑器中添加隐藏内容，并使用CSS样式将其隐藏。例如：

<div class="hidden-content" style="display: none;">
  这里是隐藏内容
</div>

2. 在WordPress主题中添加JavaScript代码：可以在WordPress主题的JavaScript文件中添加以下代码：

jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === 'h') { // 将“h”替换为需要绑定的按键
      $('.hidden-content').toggle();
    }
  });
});

子比代码

CSS代码：

.hidden-box{  display: none;}

JS代码【单个按键】：

jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === 'h') { // 将“h”替换为需要绑定的按键
      $('.hidden-box').toggle();
    }
  });
});

JS代码【多个按键】：

var keys = ['a', 'b', 'c']; // 定义需要绑定的按键数组
var index = 0; // 定义当前按键索引
jQuery(document).ready(function($) {
  $(document).keydown(function(e) {
    if (e.key === keys[index]) { // 判断按键是否匹配
      index++; // 更新当前按键索引
      if (index === keys.length) { // 判断是否匹配完成
        $('.hidden-box').toggle();
        index = 0; // 重置当前按键索引
      }
    } else {
      index = 0; // 重置当前按键索引
    }
  });
});

后台添加即可：

6月17日更新

由于对移动端不友好所以增加一个达到点击次数显示隐藏内容

var click_count = 0;
var max_click = 8; //连续点击次数
document.addEventListener("click", function(){
click_count++;
if(click_count < max_click) {
console.log("点击了 " + click_count + " 次");
}
if(click_count == max_click) {
$('.muted-box').toggle();
console.log("点击了 " + click_count + " 次, 显示隐藏内容");
}
});

.muted-box是附件DIV的Class元素，如果想隐藏其它div，自行F12查找该DIV的class元素。

最终版

CSS：

.tinymce-hide{
  display: none;
}
.tips{
  display: block;
}
.file-download-box{
  display: none;
}

JS：

该教程来自子比主题社区用户小怪兽