mu0001
2011-05-12 13:44
浏览 246

Toggle效果有点不尽人意求修改

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>$(&quot;.Button&quot;).toggle(function(event){ $(&quot;.ToggleLayer&quot;).show(); },function(){ $(&quot;.ToggleLayer&quot;).hide(); }); $(document).click(function(){$(&quot;.ToggleLayer&quot;).hide()}); }); &lt;/script&gt; </code></pre> <p></head><br> <body></p> <pre><code> &lt;span class=&quot;Button&quot;&gt;最新消息&lt;/span&gt; &lt;div class=&quot;ToggleLayer&quot; style=&quot;display:none;&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p></body><br> </html>[/code]</p> <p>理想的效果是:点击最新消息,可以切换显示UL列表。点其他地方可以也可以隐藏这个UL列表。我做的太幼稚了,当我点了其他地方,UL列表是隐藏了,但是要点击两次UL才会弹出来。是什么问题呢,对象失去了焦点还是???<br> 我知道toggle是切换方法的,第一下点击执行第一个方法 再点击执行第二个方法 如此循环,但是不懂改。</p>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • redstarofsleep 2011-05-12 14:28
    已采纳

    [code="javascript"]








    <br><br> $(function(){ </p> <pre><code>$(&quot;.Button&quot;).click(function(event){ if (document.getElementById(&#39;togg&#39;).style.display == &#39;none&#39;) { //alert(1); document.getElementById(&#39;togg&#39;).style.display = &#39;block&#39;; } else { //alert(2); document.getElementById(&#39;togg&#39;).style.display = &#39;none&#39;; } }); $(document).click(function(evt){ evt = evt || window.event; var target = evt.target || evt.srcElement; var id = target.getAttribute(&#39;id&#39;); if(id!=&#39;aa&#39;)$(&quot;.ToggleLayer&quot;).hide() }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;span class=&quot;Button&quot; id=&#39;aa&#39;&gt;最新消息&lt;/span&gt; &lt;div class=&quot;ToggleLayer&quot; id=&quot;togg&quot; style=&quot;display:none;&quot;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;最新消息&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>[/code]</p>
    已采纳该答案
    打赏 评论
  • redstarofsleep 2011-05-12 14:30

    你这里toggle失败的原因是,toggle上一次执行到show,这时候你点击了页面的其它地方,使列表隐藏了,
    再次点击的时候toggle是执行hide
    所以需要点击2次
    我改成if/esle了,并且在document上点击时判断了一下,点击的不是button

    打赏 评论

相关推荐 更多相似问题