0

記事に「続きを読む/少なく読む」機能を作成しようとしています (コードについては以下を参照してください)。私が使用しているコードはまさに私が必要としているものです...しかし、この関数のより多くの部分とより少ない部分の両方に画像を追加することはできません. 「続きを読む」の位置にあるときは、下向きの矢印になっているはずです。「Read Less」の位置にあるときは、上向きの矢印が表示されます。

どうすればこれを達成できますか？

$(document).ready(function() {

// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "More";
// The "less" link text
var lessText = "Less";

// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');

// The section added to the bottom of the "more-less" div
$(".more-less").append('<a href="#" class="adjust is-more"></a>');

$("a.adjust").text(moreText);

$(".adjust").toggle(function() {
    $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
    $(this).text(lessText);
  }, function() {
    $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
    $(this).text(moreText);
});

});
4

1 に答える 1

1 
$("a.adjust").addClass('more-text').text(moreText);    
$(".adjust").toggle(function() {
    $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
    $(this).addClass('less-text').removeClass('more-text').text(lessText);
  }, function() {
    $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
    $(this).addClass('more-text').removeClass('less-text').text(moreText);
});

そして今、css クラス.more-textと.less-text.

于 2012-12-05T17:55:15.883 に答える