javascript - 在后续点击时使 onclick 事件切换显示？

Question

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

这是我正在使用的 fiddle :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 的差异。

我怎样才能完成这些？

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

Answer 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+)