javascript - 单击功能不起作用

我有这个点击功能，旨在调整容器的高度，有点像一个拨动开关，但似乎不起作用：
JSFIDDLE：http://jsfiddle.net/0tb115ez/1/
JS：

$(function() {
    // The height of the content block when it's not expanded
    var adjustheight = 240;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read 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('<p><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);

    $(".adjust").on("click",function(e) {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

});

最佳答案

试一下：

$(function() {
    // The height of the content block when it's not expanded
    var adjustheight = 240;
    // The "more" link text
    var moreText = "Click to read more...";
    // The "less" link text
    var lessText = "Click to read 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('<p><a href="#" class="adjust"></a></p>');
    $("a.adjust").text(moreText);

    $(".adjust").on("click",function(e) {
      if ($(this).parents("div:first").find(".more-block").css('overflow') == 'hidden')
      {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
      } else {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
      }
    });

});

基本上，我们只检查它是否首先扩展。如果缩短，我们会扩大。如果已经扩展，则将其缩短。如果要添加某种属性以跟踪该块是否已扩展，并检查该属性而不是overflow属性，可能会更加清楚。