Question

我试图改变这一点：

Item1 ShowMore<br>
Item2 ShowMore<br>
Item3 ShowMore<br>

向

Item1 hidden text<br>
Item2 more hidden text<br>
Item3 even more text<br>

因此，当我点击ShowMore时，我需要在行中显示隐藏文字，并且按下时ShowMore必须消失。

此外，我还有数百行我将使用它，如果有一种方法可以实现这一点而我没有给每个元素赋予唯一的ID。

我在这里找到了一个可行的解决方案，但它做了相反的事情，它隐藏了文字...... http://w3schools.invisionzone.com/index.php?showtopic=49205（第二篇文章）

Answer 1

希望你正在寻找这个..

<强> HTML

<p>Blablabla1 <span class="showhide">ShowMore</span> Blablabla2 <span class="showhide">ShowMore</span> Blablabla3 <span class="showhide">ShowMore</span></p>

<强> CSS

.showhide {
    color:red;
    cursor:pointer;
}

<强>脚本

$(".showhide").click(function () {
    if ($(this).text() == "ShowMore") {
        $(this).text("HiddenText");
    } else {
        $(this).text("ShowMore");
    }
});

Fiddle Demo

Try this

Answer 2

有数百种方法可以为此制作功能。如果你以聪明的方式编写代码，你可以非常简单。

以下是一个例子：https://jsfiddle.net/3250pzbz/

HTML：

First sentance: <em>Show More</em><span class="hidden">That's a hidden sentance.</span>
Second sentance: <em>Show More</em><span class="hidden">That's another hidden sentance.</span>
Third sentance: <em>Show More</em><span class="hidden">And so on…</span>

和jQuery：

$(document).ready(function(){
    $('.hidden').hide(); // 1. hide all elements with class="hidden"
    $('em').click(function(){ // 2. when click on any <em>
        $(this).hide().next('.hidden').show(); // 3. hide the em you clicked on — 4. show the next element with class="hidden"
    });
});

我建议您发布代码示例，此处的人员可以更精确地为您提供帮助。

Jquery或javascript来显示隐藏文本

2 个答案: