Question

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

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

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");
}

这应该可以解决问题。：）

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

CSS扩展div可变高度

1 个答案: