javascript - 是否有一种跨浏览器的方式来通过 css 在点击时扩展文本？

Question

首先，这是我想做的:

Row 1
Row 2
Row 3

我有代码设置，因此当我将鼠标悬停在第 1、2 或 3 行时，该行会突出显示。这是通过 css 完成的。

我希望能够(例如)点击第 1 行，然后它看起来像这样:

Row 1
  Some text here
Row 2
Row 3

该文本会保留在那里，直到我单击另一行，此时它会消失。例如，假设我接下来点击了第 2 行。

Row 1
Row 2
  Even more text here
Row 3

我找到了关于使用 javascript 执行此操作并设置文本可见性的代码，但我不确定如何在没有大量几乎重复的代码的情况下执行此操作...

Answer 1

如果您拥有的 javascript 多于此功能所需的 jQuery 是合理的，它会派上用场。使用 jQuery，它会像

$(".classOfYourRows").
    click(function(){
        $(".classOfChildren").hide();
        $(".classOfChildren", this).show();

    });