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>理想的效果是：点击最新消息，可以切换显示ＵＬ列表。点其他地方可以也可以隐藏这个ＵＬ列表。我做的太幼稚了，当我点了其他地方，ＵＬ列表是隐藏了，但是要点击两次ＵＬ才会弹出来。是什么问题呢，对象失去了焦点还是？？？<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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置