mu0001 2011-05-12 05: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 06: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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 MATLAB解决问题
  • ¥35 哪位专业人士知道这是什么原件吗?哪里可以买到?
  • ¥15 关于#c##的问题:treenode反序列化后获取不到上一节点和下一节点,Fullpath和Handle报错
  • ¥15 一部手机能否同时用不同的app进入不同的直播间?
  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目