Jupyter Notebook最新版本代码隐藏按钮失效问题求助

问题根源 #

旧代码依赖jQuery，但新版Jupyter（包括Classic Notebook更新版本、JupyterLab）可能不再默认加载jQuery库，导致$符号无法识别；同时部分版本的DOM结构有调整，也会影响选择器的有效性。

修复方案 #

改用原生JavaScript实现，不依赖外部库，同时兼容不同版本的Jupyter：

from IPython.display import HTML

HTML('''
<script>
let code_show = true;
function code_toggle() {
    // 兼容Classic Notebook和JupyterLab的代码块选择器
    const codeBlocks = document.querySelectorAll('div.input, .jp-Cell-input');
    codeBlocks.forEach(block => {
        block.style.display = code_show ? 'none' : 'block';
    });
    code_show = !code_show;
}
// 页面加载完成后执行初始隐藏
document.addEventListener('DOMContentLoaded', code_toggle);
</script>
<button onclick="code_toggle()">Toggle on/off code</button>
''')

关键调整点 #

• 用原生JS的document.querySelectorAll替代jQuery选择器，无需依赖外部库
• 增加jp-Cell-input选择器，适配JupyterLab的DOM结构
• 替换原有的form按钮为普通button，避免form默认提交行为干扰
• 用document.addEventListener('DOMContentLoaded')替代jQuery的$(document).ready，实现页面加载后的初始执行

额外说明 #

如果仅在Classic Notebook中使用，可简化选择器为div.input；若按钮仍无响应，可打开浏览器控制台（F12）查看是否有JS报错，排查是否有其他脚本冲突或DOM结构差异。

内容的提问来源于stack exchange，提问作者Artem