1

嘿，所以我正在尝试创建一个网页，我可以在其中单击一个按钮，一个部分将从标题下方滑出，显示内容。当它滑出下面的所有元素时，它也应该向下滑动。

我有一种只使用 HTML 和 CSS 的方法......我的方法是单击它会自行滑出，当您单击并按住它时它会向下滑动。释放单击后，div 会向上滑动。

这是通过放置在滑出 div 上的 CSS 完成的：

#slide-out {
  -moz-transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  transition: all 1s ease-in;
  z-index: -1;
  height: 73px;
  margin-top: -98px;
  position: relative ;
}

#slide-out:active {
  margin-top: 0px;
}

这是伴随的HTML：

<div id="wrapper">
    <div class="section-title">Project</div>    

    <div id="slide-out">
    Test
    </div> <!-- of slide out -->

    <div class="section-title">The Team</div>

</div>

但是我希望这样：

  • 高度可以大得多，而不会影响任何后续元素
  • 我不需要按住按钮让它滑出（更多的切换机制）
  • 我可以单击不是 div 滑出或 div 滑出中包含的任何内容的按钮

非常感谢！

到目前为止我用来做我的代码：http ://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/

4

1 回答 1

0

为什么要限制自己使用 webkit？Jquery slideDown() 可以做你需要提供更多的跨浏览器兼容性： http ://api.jquery.com/slideDown/

于 2013-03-06T17:46:21.257 回答