使用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

检查这一。 简要说明一下，您的函数正在检查元素的显示属性是否附加了block值，这是错误的-默认情况下，此属性为空。 因此，不要求none或为empty （默认）值。

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

Answer 2

有时，样式属性是空的/无意义的，直到在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 3

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

fiddle

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