使用JS显示/隐藏Div

Show/Hide Div using JS

本文关键字：隐藏 Div 显示 JS 使用      更新时间：2023-09-26

我在一个个人网站上工作，我试图有一个显示/隐藏点击图像，但我不确定问题在哪里。

<div id="menuopen">
    <a href="#" onclick="toggle('menu');">
        <img src="assets/Images/menu.gif" alt="Menu">
    </a>
</div>
<div id="menu">
 <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="index.html">Home</a></li>
     <li><a href="index.html">Home</a></li>
     <li><a href="index.html">Home</a></li>
 </ul>
</div>

JS 

<script type="text/javascript">
<!--
function toggle(id) { 
var item = document.getElementById(id);
if(item.style.display == 'block')
item.style.display = 'none';
else
item.style.display = 'block';  }
//-->

作为旁注，这个脚本也不能使用纯文本而不是图像，所以我不认为我的问题在那里。

有时样式属性是空的/没有意义的，直到它们在JavaScript中被设置。你可以先在JS中设置这个值，也可以让JS假设它是启动状态。

解决方案1 -从JS设置状态:

var s = document.getElementById('menu').style;
s.display = 'block';
function toggle() { 
   if(s.display == 'block') { s.display = 'none'; }
   else { s.display = 'block'; }
}

解决方案2 -假设unset意味着它是可见的

function toggle(id) { 
   var s = document.getElementById('menu').style;
   s.display = (s.display!=='block' ? 'block' : 'none');
}

检查这个。只是一个简短的解释，你的函数正在检查元素是否有一个block值附加到它的显示属性，这是错误的-默认情况下，这个属性是空的。因此，应该请求none或empty(默认)值。

function toggle(o) {
    var e = document.getElementById(o);
    e.style.display = (e.style.display != 'none' ? 'none' : '' );
}

我没有太多的时间来分析，但我建议使用带有单击触发器的body内函数，而不是预定义函数。就像小提琴里的东西一样:

fiddle

希望这有帮助，如果你需要一些澄清，请告诉我，我会尽我所能。

相关文章：