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

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

使用JS显示/隐藏Div

3 个答案: