我有一个’切换’的小问题 特征 </跨度> 我正在尝试实施我的网站。
这是我的演讲。
到目前为止,这是我的jQuery:
$(‘#more’)。on(‘mousedown’,function(){ $(‘。texto’)。切换’。目前,正如您从演示中看到的那样,它正在打破&amp;同时显示两者。
我有一种感觉,我可能会 - 工程 </跨度> 这可能比我做的简单得多。
某种绅士/女士可以帮忙吗? :-) 鈥
我个人建议减少HTML,并使用以下内容:
$('#more').on('mousedown', function () { $('.texto').toggle(); $('#moreLess').text(function(i,t){ return t.trim() == 'Read More' ? 'Hide' : 'Read More'; }); });
JS小提琴演示 。
使用以下HTML:
<p> <a id="more" class="buttons a-btn"> <span class="a-btn-symbol">></span> <!-- combined the two buttons --> <span id="moreLess" class="a-btn-text">Read More</span> </a> </p> <div class="texto"> <p>Test</p> </div>
同样,为了扩展性,我建议将HTML更改为以下内容(主要是从 id 使用 class -es:
id
class
<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>
使用以下jQuery:
$('.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'; }); });
的 jsFiddle在这里。 强>
当它们具有相同的类时,无需通过ID选择它,或者在使用时设置CSS toggle() :
toggle()
$('#more').on('mousedown', function () { $('.texto, .a-btn-text').toggle(); });