Question

我有一个div后跟一个fieldset。我有这样你点击任何地方的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为display:none。最后，当fieldset可见时，边框看起来不正确：尽管代码是一致的，但是在定位方面存在1px的差异。

我怎样才能完成这些？

编辑;我想我可以查询文档，如果fieldset是{{1}}并使用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 +）

Answer 2

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

如果您希望将边框设置为阵容，只需将fieldset更改为div。

这是fiddle。

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

margin: 0px 2px 0px 2px;

匹配div。

在后续点击中进行onclick事件切换显示？

2 个答案: