单击一个按钮时如何在用户脚本中切换一组按钮？答案

【问题标题】：How to toggle a set of buttons with in a userscript when clicking one button?单击一个按钮时如何在用户脚本中切换一组按钮？
【发布时间】：2021-01-19 00:20:03
【问题描述】：

这可能措辞不好，所以我会尝试更好地解释。

我正在尝试创建一个用户脚本，当单击按钮时，将显示一组其他按钮以单击以在该按钮下方执行各种操作。然后，再次单击该按钮时，其他按钮集将消失。就像一个可切换的下拉菜单。

目前，用户脚本是这样的：

// ==/UserScript==

var menuButton       = document.createElement ('div');
menuButton.innerHTML = '<button id="mainButton" type="button">'
                + 'Glass</button>'
                ;
menuButton.setAttribute ('id', 'myContainer');
document.body.appendChild (menuButton);

//Click listener
document.getElementById ("mainButton").addEventListener (
    "click", openStuff, false
);

function openStuff (zEvent) {
    /*--- Dummy action, just adds a line of text to the top
        of the screen.
    */
    var menuButton       = document.createElement ('p');
    menuButton.innerHTML = 'Clicked.';
    document.getElementById ("myContainer").appendChild (menuButton);
}
// Style
GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   0;
        font-size:              20px;
        z-index:                1100;
    }
    #mainButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  black;
    }
` );

目前，它只是在单击按钮时在按钮下方添加一条透明的虚拟文本行。我没有使用 CSS 的经验（从指南中复制/粘贴样式），而我的 JS 经验来自 Node.js，所以我在这里非常非常迷茫。任何帮助将不胜感激。

【问题讨论】：

单元素手风琴可以解决问题吗？ dev.to/link2twenty/native-html-accordion-2fma Accordions 可以在 HTML 中使用，无需使用任何 JS。

标签： javascript html jquery css userscripts

【解决方案1】：

更新帖子：

您现在可以复制并粘贴解决方案。我们已经将 css 和 js 都直接添加到了 html 文件中。请注意，样式标签位于头部，而脚本标签位于底部，紧挨着正文结束标签
让我们更仔细地研究一下 css 和 js。
a) 我们将容器的高度设置为视图高度。严格来说，我们不必这样做，但我想显示对齐
b) 我们将显示设置为 flex。 Google flexbox 可以了解更多信息，但总而言之，这解决了很多问题，并且非常容易定位元素
c) 我们将 flex 方向设置为 column，这意味着容器中的直接子项将沿列向下流动，而不是跨行
d) justify-content:center 沿主轴对齐到中心。 align-items:center 沿短轴对齐到中心。轴是列和行。 flex-direction 定义主轴。
e) 我们首先将 #buttons 显示设置为 none 以隐藏它
f) #buttons.showme 表示元素 #button 当它具有类 .showme

js 非常简洁。唯一需要注意的是buttons.classList.toggle("showme");它只是在单击时切换（添加和删除）类。

让我知道这是否有意义，或者我们可以进行缩放调用以了解更多细节

<!DOCTYPE html>
<html>
<head>
   <title>help</title>
   <style>
      #container {
         height: 100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         border: solid 1px black;
         flex-direction: column;
      }

      #buttons {
         display: none;
      }

      #buttons.showme {
         display: block;
      }
    </style>
</head>
<body>

<div id='container'>
  <div>
    <button onclick='toggleMe()'>click me</button>
  </div>
  <div id='buttons'>

    <button onclick='dostuff(0)'>button 1</button>
    <button onclick='dostuff(1)'>button 2</button>

  </div>

</div>

<script>
function toggleMe() {

  var buttons = document.getElementById('buttons')
  buttons.classList.toggle("showme");
}

function dostuff(idx) {

  if (idx == 0) alert("button 1 action")
  else alert("button 2 action")
}
</script>
</body>
</html>

【讨论】：

虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因将真正提高您的帖子质量，并可能导致更多的赞成票。请记住，您为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并指出适用的限制和假设。
这很好，我可以看到这段代码有效。虽然我根本不懂 CSS（它在某种程度上对我来说总是一个谜，哈哈），但我确实了解 HTML 和 JS。我不明白的是 HTML 和 JS 的去向。我是否完全撤消了我必须显示按钮并当前给它一个功能？我只是在下面添加它吗？ HTML 到底去了哪里？