我有一个下拉菜单,我想在单击“菜单”按钮时向下滑动,再次单击时向上滑动。单击文档中其他任何位置时也会向上滑动。
这是我到目前为止得到的:jsfiddle
HTML:
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
Jquery:
$(function() {
// Dropdown toggle
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '100%'
}, 'slow');
});
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').toggle(function() {
$('.dropdown').stop().animate({
top: '-100px'
}, 'slow');
});
}
});
});
我所做的问题是动画仅发生一次,并且仅在单击打开下拉菜单时发生。
最佳答案
我不确定你是否知道,但是有 .slideUp()
, .slideDown()
和 .slideToggle()
jQuery 中可用方法来完成这种上下滑动动画的业务。
以下是供您引用的片段:
var dropdownToggle = $('.dropdown-toggle');
var dropdown = dropdownToggle.next('.dropdown');
$(function() {
dropdown.slideUp(0);
$(document).on('click', function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
if (dropdown.is(':visible')) {
dropdown.stop(true).slideUp();
}
}
});
dropdownToggle.on('click', function() {
dropdown.stop(true).slideToggle();
});
});
body { padding: 2em; }
a {
text-decoration: none;
color: #000;
}
nav { position: relative; }
.dropdown-toggle {
padding: .5em 1em;
background: #777;
border-radius: .2em .2em 0 0;
}
ul.dropdown {
position: absolute;
top: 100%;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
border-radius: 0 0 .2em .2em;
}
ul.dropdown li { list-style-type: none; }
ul.dropdown a {
text-decoration: none;
padding: .5em 1em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav><a class="dropdown-toggle" href="#" title="Menu">Menu</a>
<ul class="dropdown">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
注释:
- 您在同一元素上应用了 CSS
transition
,并且还尝试通过在同一元素上使用 jQuery 的.animate()
方法来应用动画。两者互相矛盾。我已经删除了 CSStransition
部分。 - 我还删除了
height: 0
部分,您会注意到那里有一个dropdown.slideUp(0)
行,它基本上应用了.slideUp()
持续时间为0
的动画,用于立即设置元素的height: 0
。
希望这有帮助。
关于javascript - 滑动下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32402176/