JS新手，所以用JQ写。
[code="javascript"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<br> $(function(){</p> <pre><code>$(".Button").toggle(function(event){ $(".ToggleLayer").show(); },function(){ $(".ToggleLayer").hide(); }); $(document).click(function(){$(".ToggleLayer").hide()}); }); </script> </code></pre> <p></head><br> <body></p> <pre><code> <span class="Button">最新消息</span> <div class="ToggleLayer" style="display:none;"> <ul> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> </ul> </div> </code></pre> <p></body><br> </html>[/code]</p> <p>理想的效果是：点击最新消息，可以切换显示ＵＬ列表。点其他地方可以也可以隐藏这个ＵＬ列表。我做的太幼稚了，当我点了其他地方，ＵＬ列表是隐藏了，但是要点击两次ＵＬ才会弹出来。是什么问题呢，对象失去了焦点还是？？？<br> 我知道toggle是切换方法的，第一下点击执行第一个方法 再点击执行第二个方法 如此循环，但是不懂改。</p>
[code="javascript"]
<br><br> $(function(){ </p> <pre><code>$(".Button").click(function(event){ if (document.getElementById('togg').style.display == 'none') { //alert(1); document.getElementById('togg').style.display = 'block'; } else { //alert(2); document.getElementById('togg').style.display = 'none'; } }); $(document).click(function(evt){ evt = evt || window.event; var target = evt.target || evt.srcElement; var id = target.getAttribute('id'); if(id!='aa')$(".ToggleLayer").hide() }); }); </script> </head> <body> <span class="Button" id='aa'>最新消息</span> <div class="ToggleLayer" id="togg" style="display:none;"> <ul> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> <li><a href="">最新消息</a></li> </ul> </div> </body> </html> </code></pre> <p>[/code]</p>
你这里toggle失败的原因是，toggle上一次执行到show，这时候你点击了页面的其它地方，使列表隐藏了，
再次点击的时候toggle是执行hide
所以需要点击2次
我改成if/esle了，并且在document上点击时判断了一下，点击的不是button