我有一个隐藏/显示 a div的按钮。在CSS中，我为此display:none;撰写了div，因为我不想在首次加载页面时显示它。我的按钮与JavaScript函数一起使用，此函数包括if-else并更改div的显示。
问题是，当我使用按钮时，我的div显示1秒钟后再次消失。
我认为这与我的CSS风格有关，但JavaScript必须更改显示。所以我不知道:(这是我的代码（我没有添加我的CSS，因为它只有display:none;关于该div）
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
这是HTML
<div class="butondiv">
<button id="btnshow" class="btn" onclick="toggle_visibility('panelid')" runat="server"> Departments </button>
</div>
<div id="panelid" class="panel" style="display:none;">
<ul class="list-group">
<li class="list-group-item"><a>Dep1 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep2 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep3 </a> <button runat="server" href="#">Delete</button></li>
</ul>
</div>
答案 0 :(得分：0)
尝试添加e.preventDefault（）; - 我怀疑它正在重新加载页面并再次从隐藏元素开始。 preventDefault停止重新加载页面。
function toggle_visibility(id) {
e.preventDefault();
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
切换事物，以便您可以处理事件并阻止页面重新加载：
document.getElementById("btnshow").addEventListener("click", function(event){
event.preventDefault();
var e = document.getElementById("panelid");
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
});
您还可以删除onclick =＆＃34; toggle_visibility（＆＃39; panelid＆＃39;）＆＃34;来自HTML。
答案 1 :(得分：0)
您应该通过明确添加按钮的类型或js来阻止表单提交。
<div class="butondiv">
<button type="button" id="btnshow" class="btn" onclick="toggle_visibility('panelid')" runat="server"> Departments </button>
</div>
答案 2 :(得分：0)
<html>
<body>
<div class="butondiv">
<button id="btnshow" class="btn" onclick="toggle_visibility('panelid')" runat="server"> Departments </button>
</div>
<div id="panelid" class="panel" style="display:none;">
<ul class="list-group">
<li class="list-group-item"><a>Dep1 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep2 </a> <button runat="server" href="#">Delete</button></li>
<li class="list-group-item"><a>Dep3 </a> <button runat="server" href="#">Delete</button></li>
</ul>
</div>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
</body>
</html>