我有一个包含使用多个详细信息/摘要标签的 React 组件的页面：

const React = require("react");

class samplePage extends React.Component {
  render() {
    const siteConfig = this.props.config;
    return (

        <div>
            <details>
                <summary>
                    First text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Second text detail.
                </summary>
            </details>
            <details>
                <summary>
                    Third text detail.
                </summary>
            </details>

            <button onClick="OpenAll()">Open All Details.</button>
            <button onClick="CloseAll()">Close All Details.</button>
        </div>
    );
  }
}

module.exports = samplePage;

我有一个全局siteConfig.js来配置我的脚本：

scripts: [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
],

使用 2 个函数从上述详细信息标签中添加或删除“打开”属性：

function CloseAll() {
  $("details").removeAttr("open");
}

function OpenAll() {
    $("details").attr("open", "open");
}

我知道我的主脚本文件中的 2 个函数是通过 导入的siteConfig.js，因为我的其他函数可以正常工作。从示例页面可以看出，启动OpenAll/CloseAll功能的按钮标签div与其他详细信息标签位于同一个位置。

我认为我的方法很好，但两个按钮都没有产生预期的效果。我怀疑这与函数作用域或我当前的设置有关（我使用的是 Docusaurus，它有点类似于“创建 React 应用程序”）。我不认为我为这样的项目做过任何不寻常的事情。感谢任何反馈。