0

折りたたみ可能な css div のこのコードは、stackoverflow で見つけました。1 つのページで複数のインスタンスを使用したいのですが、「もっと読む」リンクをクリックすると、最初のインスタンスのみが開きます。

このスクリプトを変更して、各リンクが関連付けられた 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

4

1 に答える 1

0

次の属性を変更します。

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

これでうまくいくはずです。:)

編集：「もっと読む/少なくする」ボタンをほとんど忘れています。

于 2013-06-14T10:23:08.997 に答える