个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我希望我的下拉动画看起来好像是从上面掉落的，而不是 slideToggle 动画，它就像从 0 到 100% 的高度显示。我使用 top 但它没有隐藏在上面所以我切换到 margin-top。我想要的下拉动画正在工作，但它在标题和滑动时切换按钮上方。我为标题和切换按钮设置了更高的 z-index，但它不起作用。
<body>
<header>
HEADER
</header>
<div id="opt-slide">
<span id="toggle">OPTIONS</span>
<ul id="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
</body>
<style>
* { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}
header { height:200px; background:#39F; z-index:4;}
#opt-slide { width:300px;}
#toggle { background:#099; display:block; height:50px; color:#FFF; line-height:50px; z-index:4;}
#dropdown { background:#0C9; list-style:none; margin-top:-450px; z-index:2; opacity:0;}
#dropdown li { height:40px; line-height:40px;}
#dropdown li:hover { background:#FAFAFA;}
</style>
脚本:
<script>
$(document).ready(function() {
var top = $('header').height() + $('#toggle').height() + $('#dropdown').height();
$('#toggle').click(function() {
if($('#opt-slide').hasClass('open')){
$('#dropdown').animate({marginTop:-top, opacity:0},'slow');
$('#opt-slide').removeClass('open');
}else{
$('#dropdown').animate({marginTop:0, opacity:1},'slow');
$('#opt-slide').addClass('open');
}
});
$('#dropdown > li').click(function() {
$('#dropdown').animate({marginTop:-top},'slow');
$('#opt-slide').removeClass('open');
});
});
</script>
最佳答案
写:
CSS:
#dropdown {
background:#0C9;
list-style:none;
margin-top:0px;
z-index:2;
display:none;
}
JS:
$('#toggle').click(function () {
$('#dropdown').slideToggle();
$('#opt-slide').toggleClass('open');
});
$('#dropdown > li').click(function () {
$('#dropdown').slideUp();
$('#opt-slide').removeClass('open');
});
关于javascript - 下拉下拉动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20309746/
27
4
0
我有一个包含 5 个选项卡的选项卡栏，每个选项卡都包含一些数据。当用户下拉刷新时，我想显示一个刷新指示器，并且选项卡内的数据应该通过 API 调用进行更新。下面是我到目前为止尝试过的代码。 帮助我了解
我正在尝试使用 CollapsingToolbarLayout 和 AppBarLayout 底部的其他 View 来创建以下行为，但是当我滚动时栏没有折叠/展开/拉动 PullView，这意味着在使
我正在尝试在 React Native 中构建类似于 IMessage 和 WhatsApp 标题的内容，用户可以向下拉以显示标题中的搜索栏。 我已经能够向下拉以显示隐藏的输入，但由于 ScrollV
我希望让我的页面具有响应性，添加了 Bootstrap 并将我的两个 div 排成一行，放在一个流体容器中。 我尝试向左按钮添加向右拉/向右浮动，向右图像向左拉/向左浮动，但它们没有移动。 我没有使用
如何使用简单的饼图从下面的 s:variant 块中获取标题标签？ product_variants-96590662 Default Title 10.00 002 0 我已
我已经编写了一些代码，使用 Instagram 图形 API 从 Instagram 中提取图像。一切工作正常，但性能很慢。我正在使用 JavaScript，但也遇到了同样的问题，但使用 PHP 时情
我是一名优秀的程序员,十分优秀！