study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-06-08 15:04:05 +08:00
Code Issues Packages Projects Releases Wiki Activity
uTools-Manuals/docs/jQuery/toggle.html
fofolee 38dcd51d8a v0.0.2
2019-04-21 11:50:48 +08:00

364 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.toggle()</h1>
<div class="entry-meta">
所属分类：<span class="category"><a href="/category/effects/">特效</a> &gt; <a href="/category/effects/basics/">基本特效</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/toggle/" target="_blank">.toggle()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="toggle1">
<h2 class="section-title"> <span class="name">.toggle( [duration ] [, complete ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span> </h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>显示或隐藏匹配元素。</p>
<ul class="signatures">
<li class="signature" id="toggle-duration-complete">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.toggle( [duration ] [, complete ] )</h4>
<ul>
<li>
<div> <strong>duration</strong> (默认: <code>400</code>)</div>
<div>类型: <a href="/Types/#Number">Number</a> or <a href="/Types/#String">String</a> </div>
<div>一个字符串或者数字决定动画将运行多久。</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>在动画完成时执行的函数。</div>
</li>
</ul>
</li>
<li class="signature" id="toggle-options">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.toggle( options )</h4>
<ul>
<li>
<div><strong>options</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一组包含动画选项的值的集合。 支持的选项:</div>
<ul>
<li>
<div>
<strong>duration</strong> (default: <code>400</code>)
</div>
<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或
"fast")或表示动画时长的毫秒数值(如：1000) ）
</div>
</li>
<li>
<div>
<strong>easing</strong> (default: <code>swing</code>)
</div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>插件）
</div>
</li>
<li>
<div>
<strong>queue</strong> (default: <code>true</code>)
</div>
<div>Type: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>
一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 <strong>从jQuery1.7开始</strong>，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用<code>.dequeue("queuename")</code>来启动它。
</div>
</li>
<li>
<div><strong>specialEasing</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a>
</div>
<div>一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 ( <a href="/category/version/1.4/">1.4</a> 新增)
</div>
</li>
<li>
<div><strong>step</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Number">Number</a> now, <a href="http://api.jquery.com/Types/#Tween">Tween</a> tween )
</div>
<div>
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
</div>
</li>
<li>
<div><strong>progress</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Number">Number</a> progress, <a href="http://api.jquery.com/Types/#Number">Number</a> remainingMs )
</div>
<div>
每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
<div>在动画完成时执行的函数。</div>
</li>
<li>
<div><strong>done</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )
</div>
<div>在动画完成时执行的函数。 (他的Promise对象状态已完成).<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>fail</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )
</div>
<div>
动画失败完成时执行的函数。(他的Promise对象状态未完成)。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>always</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )
</div>
<div>
在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="signature" id="toggle-duration-easing-complete">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.toggle( [duration ] [, easing ] [, complete ] )</h4>
<ul>
<li>
<div>
<strong>duration</strong> (默认: <code>400</code>)</div>
<div>类型: <a href="/Types/#Number">Number</a> or <a href="/Types/#String">String</a>
</div>
<div>一个字符串或者数字决定动画将运行多久。</div>
</li>
<li>
<div>
<strong>easing</strong> (默认: <code>swing</code>)</div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>在动画完成时执行的函数。</div>
</li>
</ul>
</li>
<li class="signature" id="toggle-showOrHide">
<h4 class="name"> <span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>.toggle( showOrHide )</h4>
<ul>
<li>
<div><strong>showOrHide</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a> </div>
<div>一个布尔值，指示元素是显示或隐藏。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<blockquote>
<p>注意: 事件处理套件也有一个名为<a href="/toggle-event">.toggle()</a>方法。哪一个被调用取决于传递的参数的设置。</p>
</blockquote>
<p>如果没有参数，<code>.toggle()</code>方法是最简单的方法来切换一个元素可见性：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div></td>
<td class="code"><pre><div class="container"><div class="line"><code>$(<span class="string">'.target'</span>).toggle();</code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<p>通过改变CSS的<code>display</code>属性，匹配的元素将被立即显示或隐藏，没有动画。如果元素是最初显示，它会被隐藏，如果隐藏的，它会显示出来。<code>display</code>属性将被储存并且需要的时候可以恢复。如果一个元素的<code>display</code>值为<code>inline</code>，然后是隐藏和显示，这个元素将再次显示<code>inline</code>。</p>
<p>当提供一个持续时间参数， <code>.toggle()</code>成为一个动画方法。<code>.toggle()</code>方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画。当一个隐藏动画后，高度值达到0的时候，<code>display</code> 样式属性被设置为<code>none</code>，以确保该元素不再影响页面布局。</p>
<p>持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 <code>'fast'</code> 和 <code>'slow'</code> 分别代表<code>200</code> 和 <code>600</code>毫秒的延时。</p>
<p><strong>从jQuery 1.4.3开始</strong>,一个可选的字符串类型的easing参数，用于确定使用的缓冲函数。缓动函数指定用于动画进行中在不同点位的速度。jQuery默认只提供两个缓冲效果：调用 <code>swing</code>, 在一个恒定的速度进行；调用 <code>linear</code>. 更多的缓动函数要使用的插件，最显着的是<a href="http://jqueryui.com/">jQuery UI suite</a>（译者注：或<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>插件）。</p>
<p>如果提供回调函数参数，回调函数会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是<code>this</code>会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次。</p>
<p>我们可以给任何元素做动画，比如一个简单的图片：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div></td>
<td class="code"><pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"clickme"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Click here</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">id</span>=<span class="value">"book"</span> <span class="attribute">src</span>=<span class="value">"book.png"</span> <span class="attribute">alt</span>=<span class="value">""</span> <span class="attribute">width</span>=<span class="value">"100"</span> <span class="attribute">height</span>=<span class="value">"123"</span> /&gt;</span></code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<p>当另一个元素被点击时，<code>.toggle()</code> 将被调用：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div></td>
<td class="code"><pre><div class="container"><div class="line"><code>$(<span class="string">'#clickme'</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#book'</span>).toggle(<span class="string">'slow'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Animation complete.</span></code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code>});</code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<p>随着最初显示的元素，我们可以在第一次点击的时候将其缓慢隐藏：</p>
<p class="image four-across"> <img alt="" src="/resources/0042_06_09.png"/> <img alt="" src="/resources/0042_06_10.png"/> <img alt="" src="/resources/0042_06_11.png"/> <img alt="" src="/resources/0042_06_12.png"/> </p>
<p>第二次单击将再次显示元素：</p>
<p class="image four-across"> <img alt="" src="/resources/0042_06_13.png"/> <img alt="" src="/resources/0042_06_14.png"/> <img alt="" src="/resources/0042_06_15.png"/> <img alt="" src="/resources/0042_06_16.png"/> </p>
<p>该方法的第二个版本接受一个布尔参数。如果这个参数为<code>true</code> ，那么匹配的元素将显示;如果<code>false</code> ，元素是隐藏的。从本质上讲，语句：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div></td>
<td class="code"><pre><div class="container"><div class="line"><code>$(<span class="string">'#foo'</span>).toggle(showOrHide);</code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<p>相当于:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div></td>
<td class="code"><pre><div class="container"><div class="line"><code><span class="keyword">if</span> ( showOrHide == <span class="literal">true</span> ) {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#foo'</span>).show();</code></div></div><div class="container"><div class="line"><code>} <span class="keyword">else</span> <span class="keyword">if</span> ( showOrHide == <span class="literal">false</span> ) {</code></div></div><div class="container"><div class="line"><code> $(<span class="string">'#foo'</span>).hide();</code></div></div><div class="container"><div class="line"><code>}</code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Additional Notes(其他注意事项):</h3>
<div class="longdesc">
<ul>
<li>所有jQuery效果，包括<code>.toggle()</code>,都能通过设置<code>jQuery.fx.off = true</code>全局的关闭，，效果等同于将动画持续时间（duration ）参数设置成 0。更多信息查看 <a href="/jquery.fx.off">jQuery.fx.off</a>。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples">
<header>
<h2 class="underline">例子:</h2>
</header>
<div class="entry-example" id="example-0">
<h4>Example: <span class="desc">切换所有段落的显示或隐藏状态。</span> </h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div></td>
<td class="code"><pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">button</span>&gt;</span>Toggle<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span> <span class="attribute">style</span>=<span class="value">"display: none"</span>&gt;</span>Good Bye<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).toggle();</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">在 600 毫秒内，以动画的形式切换所有段落的显示或隐藏状态。</span> </h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div></td>
<td class="code"><pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#dad</span>;</span></span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">16</span>px;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">button</span>&gt;</span>Toggle 'em<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span>Hiya<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span>Such interesting text, eh?<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).toggle(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">点击按钮时，显示所有的段落，再次点击时，隐藏它们，如此往复。</span> </h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter"><div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div></td>
<td class="code"><pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">button</span>&gt;</span>Toggle<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span> <span class="attribute">style</span>=<span class="value">"display: none"</span>&gt;</span>Good Bye<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> flip = <span class="number">0</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).toggle( flip++ % <span class="number">2</span> == <span class="number">0</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div>
</pre></td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</section>
</div>
</article>
</div>
</article>
Reference in New Issue View Git Blame Copy Permalink