使用 JS 显示/隐藏 Div

Question

我正在开发一个个人网站，我正在尝试在单击图像时显示/隐藏，但我不确定问题出在哪里。

HTML

<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';  }
//-->

顺便说一句，这个脚本也不能使用纯文本而不是图像，所以我认为我的问题不在于那里。

Answer 1

有时样式属性在 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 - 假设未设置意味着它是可见的

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

Answer 2

检查这个。只是一个简短的解释，你的函数正在检查元素是否有一个 block 附加到它的显示属性的值，这是错误的 - 默认情况下，这个属性是空的。所以，宁可要求none 或empty（默认）值。

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

Answer 3

我没有太多时间进行分析，但我建议使用带有点击触发器的体内函数，而不是预先定义函数。就像这里的小提琴一样：

fiddle

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