Javascript Toggle效果的小问题

作者: Innate Mind
发布时间: 2024-02-07 12:20:48 (6月前)
转自：

3 条回复

0#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我个人建议减少HTML，并使用以下内容： </p> <pre> <code> $('#more').on('mousedown', function () { $('.texto').toggle(); $('#moreLess').text(function(i,t){ return t.trim() == 'Read More' ? 'Hide' : 'Read More'; }); }); </code> </pre> <P> <a href="http://jsfiddle.net/davidThomas/bqJhL/5/" rel="nofollow"> JS小提琴演示 </A> 。 </p> <P> 使用以下HTML： </p> <pre> <code> <p> <a id="more" class="buttons a-btn"> <span class="a-btn-symbol">></span>  <span id="moreLess" class="a-btn-text">Read More</span> </a> </p> <div class="texto"> <p>Test</p> </div> </code> </pre> <P> 同样，为了扩展性，我建议将HTML更改为以下内容（主要是从 <code> id </code> 使用 <code> class </code> -es： </p> <pre> <code> <p> <a class="more" class="buttons a-btn"> <span class="a-btn-symbol">></span> <span class="moreLess" class="a-btn-text">Read More</span> </a> </p> <div class="texto"> <p>Test</p> </div> <p> <a class="more" class="buttons a-btn"> <span class="a-btn-symbol">></span> <span class="moreLess" class="a-btn-text">Read More</span> </a> </p> <div class="texto"> <p>Test</p> </div> </code> </pre> <P> 使用以下jQuery： </p> <pre> <code> $('.more').on('mousedown', function () { var self = $(this), parent = self.parent(); parent.next('.texto').toggle(); parent.find('.moreLess').text(function(i,t){ return t.trim() == 'Read More' ? 'Hide' : 'Read More'; }); }); </code> </pre> <P> <a href="http://jsfiddle.net/davidThomas/bqJhL/6/" rel="nofollow"> JS小提琴演示 </A> 。 </p> </DIV>

编辑
1#
回复此人
文艺青年3 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="http://jsfiddle.net/bqJhL/3/" rel="nofollow"> 的<strong> jsFiddle在这里。 </强> </A> </p> <P> 当它们具有相同的类时，无需通过ID选择它，或者在使用时设置CSS <code> toggle() </code> ： </p> <pre> <code> $('#more').on('mousedown', function () { $('.texto, .a-btn-text').toggle(); }); </code> </pre> </DIV>

编辑

登录后才能参与评论