2

是否可以使用从 div 的一半到完整然后返回的 slideToggle？

我有这个代码的一个解决方案：

$("button").click(function() {
  $("#myDiv").toggleClass("reveal-closed").toggleClass("reveal-open");
});

请参阅工作示例http://jsfiddle.net/NHRzH/1/

但我想使用更多的幻灯片效果和更好的解决方案，而不涉及类

$("button").click(function () {
    $(".mydiv").slideToggle("slow");
});

这个脚本需要重复 20-30 div 和按钮（阅读更多功能） 这是一个 slideToggle 的例子，它不适用于半 div http://jsfiddle.net/Xvxs3/

4

2 回答 2

1

这个怎么样？

.reveal-open {
  max-height: 100px;
}
div {
  overflow: hidden;
  max-height: 50px;
  -webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
  transition: max-height .5s linear;
}

和jQuery

$("button").click(function() {
  $("#myDiv").toggleClass("reveal-open");
});

http://jsfiddle.net/Dtwigs/NHRzH/4/

于 2013-03-21T22:17:03.017 回答
0

这是我的解决方案：http: //jsfiddle.net/NHRzH/12/

CSS：

#myDiv {
    overflow: hidden;
    height: 50px;
}

jQuery：

$("button").click(function(e) {
    toggleDiv($(this).attr('href'));
    e.preventDefault();
});

function toggleDiv(selector) {
    var $this = $(selector);

    //Close div, if open.
    if($this.hasClass('open'))
    {
        var originalHeight = $this.data('height');
        $this.animate({
                height: originalHeight},
                200,
                function() { $(this).removeClass('open'); });
        return false;
    }

    //Open the div
    var currentHeight =  $this.height();
        autoHeight = $this.css('height', 'auto').height()
        $this.data('height', currentHeight)
             .height(currentHeight).animate({
                                        height: autoHeight},
                                        200,
                                        function() { $(this).addClass('open'); });
}

HTML：

<div id="myDiv">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<button href="#myDiv">Show more</button>

<hr />

<div id="myDiv2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<button href="#myDiv2">Show more</button>

这个怎么运作。

我们为按钮分配一个href值，然后将其传递给一个toggleDiv函数（处理 div 的切换）。

该toggleDiv函数将处理 的状态div，并根据其当前状态将其切换为打开或关闭。它将从中高到全高（自动）。

完整的工作示例可以在这里查看，有多个 div：http: //jsfiddle.net/NHRzH/12/

于 2013-03-21T23:01:32.157 回答