-1

私のサイトには、以下を読む/もっと読むトグル スイッチがあります。それはうまく機能しますが、開いているとき（テキストが非表示になっていない）、「もっと読む」というリンクテキストに「もっと読む」というリンクテキストが必要です。私はjQueryが初めてで、簡単な解決策を探しています。

これが私のコードです：

<div class="survey_text">
  Always visable text
</div>
<h3 class="read-more-toggle">Read More</h3>
 <div class="read-more-content">
  <div class="survey_text">
    Hidden text that is toggled open
  </div>
</div>

<script>
// Hide the extra content initially, using JS so that if JS is disabled, no problemo.
$('.read-more-content').addClass('hide');

// Set up the toggle.
$('.read-more-toggle').on('click', function() {
  $(this).next('.read-more-content').toggleClass('hide');
});
</script>
4

1 に答える 1

1

data-代替テキストを属性として追加します。

<h3 class="read-more-toggle" data-alt-text="Read less">Read More</h3>

JS でそのテキストを取得します。

$('.read-more-toggle').on('click', function() {
    var element = $(this);
    var text = element.text();

    element
        .text( element.data('alt-text') )
        .data('alt-text', text)
        .next('.read-more-content').toggleClass('hide');
});
于 2013-08-21T18:57:22.710 に答える