Question

我一直在寻找一段时间，但没有找到我想要创建的解决方案。

我想要一个真正的“幻灯片”切换，所以div正在“向下移动”。但是如果你采用JQuery slideToggle或我发现的几个CSS解决方案，他们只是修改div的高度，它们并没有真正滑动它。

所以我通过设置margin-top属性来创建我自己的解决方案，这很好用，但是我有动态高度的问题（例如，如果你调整浏览器窗口的大小），不确定负边距有多高应确保它总是完全滑出，另一方面不要延迟滑入，因为边缘顶部太远了。

我目前正在使用

margin-top: -100%;

但是，如果你调整窗口/框架的大小，那么负边距并不总是足够的。

也许已经有一个更好的解决方案，但我没有找到它，所以我创建了这个fiddle，分享我的想法并听取你的建议。

更新：我的最新updated fiddle就在这里......改变了一些事情，感谢所有的反馈！

Answer 1

更新 - 修复错字并整理。

我认为您可以将它与jQuery show()和hide()结合使用，以避免此问题。

http://jsfiddle.net/jzj80kzs/7/

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show');  // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});

$('.switch').click(function(event) {
  var theSwitch = $(this).closest('.block').find('.switch');
  var theBlock = $(this).closest('.block').find('.details');
  if (theBlock.hasClass('mt0')) {
    theSwitch.html('+ show'); // change the switch dynamically
    theBlock.removeClass('mt0').slideUp(function() {
      $(this).delay(300).hide();
    });
  } else {
    theSwitch.html('- hide');
    theBlock.addClass('mt0').slideDown().show();
  }
});

div.block {
  position: relative;
  overflow: hidden;
  border: 1px solid #333;
  border-bottom: 0px;
  line-height: 20px;
  background-color: #fff;
}
div.block:last-child {
  border-bottom: 1px solid #333;
}
div.basics {
  position: relative;
  background-color: #fff;
  z-index: 2;
  padding: 2px 4px;
}
div.details {
  border-top: 1px solid #333;
  position: relative;
  background-color: #99F;
  z-index: 1;
  height: auto;
  margin-top: -100%;
  -webkit-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -moz-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  -o-transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  transition: margin-top 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}
div.mt0 {
  margin-top: 0px;
}
span.switch {
  float: right;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="block">
  <div class="basics">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <span class="switch">+ show</span>
  </div>
  <div class="details">
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Answer 2

我认为使用max-height代替margin-top是件好事，您可以使用transition-duration

 div.block {
         position: relative;
         overflow: hidden;
         border: 1px solid #333;
         border-bottom: 0px;
         line-height: 20px;         
         background-color: #fff;
     }
         div.block:last-child {
             border-bottom: 1px solid #333;
         }
     div.basics {
         position:relative;
         background-color: #fff;
         z-index: 2;
         padding: 2px 4px;
     }
     div.details {
         border-top: 1px solid #333;
         position: relative;
         background-color: #99F;
         z-index: 1;
         height: auto;
         max-height: 0px;
         transition-duration: 0.5s;
     }
     div.mt0 {
         max-height: 1000px;
         transition-duration: 0.5s;
     }
     span.switch {
         float: right;
         cursor: pointer;
         font-size: 20px;
         font-weight: bold;
     }

JSFIDDLE

Answer 3

试一试。每次单击按钮时，它都应平滑地上下滑动。我将show / hide函数放在slideUp / slideDown回调中，这可以防止突然的捕捉。

$('.switch').click(function() {                            
    if ($(this).closest('.block').find('.details').hasClass('mt0')) {
        $(this).closest('.block').find('.details').removeClass('mt0');
        $(this).closest('.block').find('.details').slideUp(function(){$(this).hide();});
    } else {
        $(this).closest('.block').find('.details').addClass('mt0');
        $(this).closest('.block').find('.details').slideDown(function(){$(this).show();});
    }
});

http://jsfiddle.net/IronFlare/806eda2o/1/

Answer 4

感谢您的所有灵感，最终让我找到了这个解决方案，我认为这很不错。

通过这个新的apporach，我转而使用＆＃34; slideToggle＆＃34;，所以基本上现在它又是一个高度切换（我不想要），但是我使用了一个＆＃34;技巧＆＃34;创造我想要实现的光学幻灯片效果。在细节DIV中，我添加了一个固定在父母底部的固定DIV。因此，随着父母的高度增长，内容被“滑动”＃34;现在，不只是＆＃34;透露＆＃34;。

唯一出现的问题是，固定的DIV位于绝对位置，因此父级不再具有高度，我希望细节在开始时不可见。因此我决定使用固定DIV中的JQuery获取高度，并将其添加到详细信息DIV中。

因为JQuery没有＆＃34;喜欢＆＃34;隐藏元素在试图获得高度时，我现在正在获得固定细节的高度＆＃34;在漂亮的＆＃34; JQuery Actual Plugin＆＃34;的帮助下本林。

    $('.details').each(function(){
      $(this).height($(this).find('.pinned').actual('height'));
    });

我在最新的小提琴中添加了一个额外的触发器，以便在调整窗口大小时高度仍然匹配。

最终，这个解决方案是我想要的光学解决方案。如果您有兴趣，请查看我的final fidde。

CSS真正的“幻灯片”切换不是“高度”切换

4 个答案: