点击功能不起作用

Question

我有点击功能，这是为了调整容器高度，像开关一样，但似乎不起作用：

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

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

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

});

Answer 3

此处 somecontainer 是每次点击adjust都会切换的内容。

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

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

               $(somecontainer).show();
          }

  });