Question

我写了这段代码

$(".morelink").click(function(){
    $(".DescMore").show();
    $(".DescLess").hide();
});

但是当我点击其中一个链接时，它会显示所有这些链接。我只想显示我点击的内容。我怎么能这样做？

这是html

<span class="Desc">
 <span class="DescLess" name="4" id="title">It has often and confidently been asserted, that man's origin can never be known: but igno...</span>
 <a class="morelink" onclick=""> More</a>
 <span class="DescMore" id="more">It has often and confidently been asserted, that man's origin can never be known: but ignorance more frequently begets confidence than does knowledge: it is those who know little, and not those who know much, who so positively assert that this or that problem will never be solved by science.\</span>
 <br>
</span>

Answer 1

你需要隐藏/显示当前元素的兄弟元素，所以

$(".morelink").click(function () {
    var $this = $(this).hide();
    $this.siblings(".DescMore").show();
    $this.siblings(".DescLess").hide();
});

演示：Fiddle

Answer 2

这是一种不同的方法。切换其他文本并将文本从“更多”切换为“更少”：更新 - 我还在文本/

中添加了一个fadeToggle

jsFiddle

$(".morelink").on('click',function(){
$(".DescMore").fadeToggle();    
if ($(this).text() === 'More') {
    $(this).text('Less');
} else {
    $(this).text('More');        
}    
});

如何针对特定范围进行切换（更多/更少）？

2 个答案: