在后续点击时显示 onclick 事件切换？答案

【问题标题】：Making onclick event toggle display on subsequent clicks?在后续点击时显示 onclick 事件切换？
【发布时间】：2015-01-30 00:04:50
【问题描述】：

我有一个 div 后跟一个字段集。我有它，所以你在任何地方单击 div，它会使否则 display:none 字段集出现。但是，我也希望它在第二次点击时消失。基本上，onclick 事件会在 display:none 和 display:block 之间切换。

这是我正在使用的小提琴：http://jsfiddle.net/zk1j23m5/

function showexpando(id) {
  document.getElementById(id).style.display = "block";
}

.greyex {
  padding: 15px;
  padding-left: 30px;
  padding-right: 30px;
  border: solid black 3px;
  border-top: 0px;
  border-radius: 0px 0px 7px 7px;
  background-color: #DDDDDD;
  display: none;
}
.expando {
  background-color: #A971A9;
  font-weight: bold;
  padding: 5px;
  text-align: center;
  border: 3px solid black;
  border-radius: 7px 7px 0px 0px;
  border-bottom: 0px;
  cursor: pointer;
}
.expando a {
  text-decoration: none;
}

<div class="expando" onclick="showexpando('excred');">
    <a>&#x25BC; lorem &#x25BC;</a>
</div>
<fieldset class="greyex" id="excred">ipsum</fieldset>

另外，边框也有问题。我希望expando div 在隐藏字段集时具有border-radius: 7px，但在字段集可见时具有border-radius:7px 7px 0px 0px; border-bottom: 0px。最后，当 fieldset 可见时，边框看起来不正确：尽管代码一致，但定位却有 1px 的差异。

我怎样才能完成这些？

编辑；如果字段集是display:none，我想我可以查询文档并相应地使用 JS 来摆弄 CSS，但它看起来很笨拙，我相信有一个更简单的解决方案。

【问题讨论】：

为了将来参考，您的整个代码应该包含在问题中。 SO 提供现场小提琴工具，无需使用外部站点。
我会将整个事物视为一个项目，并将一个类添加到顶级指定状态。像这样的东西：jsfiddle.net/zk1j23m5/33

标签： javascript html css

【解决方案1】：

您应该改用unobtrusive JavaScript。

我建议切换课程。例如：

Updated Example

var expand = document.querySelector('.expando');

expand.addEventListener('click', function () {
    this.nextElementSibling.classList.toggle('visible');
});

.greyex {
    display: none;
}
.greyex.visible {
    display: block;
}

参考资料：

.nextElementSibling (IE9+)
.classList (IE10+)

【讨论】：

【解决方案2】：

注意到没有人回答你的第二部分。

如果您希望让边框对齐，只需将 fieldset 更改为 div。

这是fiddle。

或者，您也可以将fieldset 元素的边距设置为：

margin: 0px 2px 0px 2px;

匹配div。

【讨论】：