скрытие и показ текста, не скрывающегося в jquery - PullRequest
Новая
       24

скрытие и показ текста, не скрывающегося в jquery

1 голос
/ 20 марта 2012

Я получаю текст из документа api xml и выводю его. Мне нужно ограничить количество отображаемого текста. Но я делаю что-то не так. Я ограничиваю высоту div до 200px и скрываю переполнение, затем, нажимая кнопку, я показываю текст. Но когда я иду скрывать это снова, это не работает.

Вот jsfiddle: http://jsfiddle.net/liveandream/zXDKK/

Если есть кто-то, кто также может помочь мне сделать так, чтобы он скользил вверх и вниз, а не разрезал строку слов пополам, это было бы БОЛЬШОЕ ЦЕНИТЬ! Спасибо!

1 Ответ

0 голосов
/ 20 марта 2012

.readLess не существует, когда вы связываете событие.Попробуйте код ниже,

См. Альтернативное решение ниже для лучшего кода.

DEMO 

var div = $(".overview").height();
var content = $(".overview").html();
$(".overview").css("height", "200px");
$(".overview").css("overflow", "hidden");

$(document).on('click', ".readMore", function() {
    $(".overview").html(content);
    $(".overview").css("height", "auto");
    $("#read").removeClass("readMore");
    $("#read").addClass("readLess");
    $("#read").html("Read less");
});

$(document).on('click', ".readLess", function() {
    $(".overview").css("height", "200px");
    $(".overview").css("overflow", "hidden"); 
});

В качестве альтернативы, вы можетесвяжите это с #read, что будет намного лучше .. см. ниже,

DEMO 

var $overview = $('.overview');
var $read = $('#read');

var div = $overview.height();
var content = $overview.html();
$overview.css({
    "height": "200px",
    "overflow": "hidden"
});

$read.on('click', function() {
    var $this = $(this);
    if ($this.hasClass('readLess')) {
        $overview.css({
            "height": "200px",
            "overflow": "hidden"
        });

       $read.removeClass("readLess").addClass("readMore").html("Read More");
    } else if ($this.hasClass('readMore')) {
        $overview.html(content);
        $overview.css("height", "auto");
        $read.removeClass("readMore").addClass("readLess").html("Read less");

    }
});
...