css - 具有可变高度的 CSS 扩展 div

Question

我在stackoverflow上找到了可折叠css div的代码，我想在一个页面上使用它的多个实例，但是当我单击任何“阅读更多”链接时，它只会打开第一个实例。

如何修改此脚本以使每个链接仅打开与其关联的 div？

来源：http: //jsfiddle.net/QkKej/

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
  document.getElementById("more-button").value=document.getElementById("morebutton").value=='Read more'?'Read less':'Read more';
}

我使用它的页面：http ://www.udayansalimbanerjee.com/articles

Answer 1

修改这些属性：

id="more-button" ---> class="more-button"
id="grow" ---> class="grow"

另外完整的onclick：

onclick="growDiv(this)"

然后你可以使用 jQuery（我知道，该网站支持它）：

function growDiv(elem) {
    var elEq = $(".more-button").index(elem);
    $(elem).val(
        $(".grow").eq(elEq).is(":visible") ? "Read more" : "Read less"
    );
    $(".grow").eq(elEq).slideToggle("fast");
}

这应该可以解决问题。:)

编辑：我几乎忘记了“阅读更多/更少”按钮。