javascript - 需要用javascript展开多行，文字溢出

Question

http://jsfiddle.net/10h8t3ah/

function changeHeight(rowNum) {
  document.getElementById("demo").style.height= "70px";
  var fooBar = document.getElementById(rowNum);
  fooBar.style.height = "100px";
}

我在这里试图完成的是将定义为 row1、row2、row3 和 row4 的变量作为 rowNum 传递，它将更改链接和具有相应行号的段落的高度。

我正在尝试传递段落和链接的 ID，这样如果您将鼠标悬停在链接上，反之亦然，高度将会改变。

从本质上讲，如果您将鼠标悬停在链接或段落上，并排放置的相应容器的高度将会扩展，并且段落中的文本将可见。段落文本我已经设置了换行符的 wrap-text 属性，但它似乎只是溢出了。

Answer 1

好的 - 有几个概念需要更正才能理解为什么这不起作用:

1. DOM 对象的 id 必须是唯一的 (您的 jsfiddle 在您的两个“行”上使用相同的 ID - 我已经更新了您的代码使用 class 而不是 id 这样)
2. 您传递给 changeHeight 函数的参数必须是一个字符串(如果您传递 row1，则 row1 必须是一个已定义的变量，而不是你应该传递 'row1' - 再一次，看看我更新的 fiddle 代码)

这是一个 jsfiddle，它可以完成大部分你想要的，我认为:http://jsfiddle.net/zwyr4hn1/10/

我还修复了一些小问题: 1. 悬停新行时，您需要将其他行返回到较小的大小(我在所有行对象上使用类 row 来执行此操作) 2. 需要此 css 来让您的 a 对象以您想要的方式调整大小:a { display: inline-block; }

我没有解决您提到的换行文本问题，因为我没有在 jsfiddle 上看到它。