Question

是否可以将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/

Answer 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/

Answer 2

这是我的解决方案：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/

slideToggle div的一半？

2 个答案: