在不工作

Question

我有这个上这是为了调整conatiner高度，有点像一个切换，但似乎并没有工作，点击功能点击功能：

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

}); 

Answer 1

这给一个镜头：

$(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); 
     } 
    }); 

}); 

基本上我们只是检查，如果它的第一延展。如果它缩短了，我们扩大。如果它已经扩大，我们缩短它。如果您要添加某种属性来跟踪块是否展开，那么可能会更清楚一些，并检查该块是否代表溢出属性。

Answer 2

这里somecontainer是一些东西，被触发，每次我们点击调整。

$(".adjust").on("click",function(e) { 
      check if somecontainer is visible 
      if($(somecontainer).is(':visible')){ 
       // 

       $(somecontainer).hide(); 
      } 
      else{ 
       // 

       $(somecontainer).show(); 
      } 

    }); 

Answer 3

太晚了，但这里是一个清洁的版本。它切换链接本身为简单起见在一个类（也允许连结，变更样式）：

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/0tb115ez/20/

$(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) { 
     var $this = $(this); 
     // Toggle a class and see if it "was" set (hence !) 
     var more = !$this.toggleClass('moreactive').hasClass('moreactive'); 
     var $parents = $this.parents("div:first"); 
     var pcont = $parents.find("p.continued"); 
     var $more = $parents.find(".more-block"); 
     $more.css('height', more ? adjustheight : 'auto').css('overflow', more ? 'hidden' : 'visible'); 
     pcont.css('display', more ? 'none' : 'block'); 
     $this.text(more ? moreText : lessText); 
    }); 

});