滑动下拉菜单
Sliding Drop Down Menu
我有一个下拉菜单,我想在单击“菜单”按钮时向下滑动,再次单击时向上滑动。单击文档中的其他任何位置时也向上滑动。
这是我目前得到的: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()
and .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()
方法来应用动画.两者相互矛盾。我删除了 CSS transition
部分。
- 我还删除了
height: 0
部分,您会注意到那里有一个 dropdown.slideUp(0)
行,它基本上应用了 0
持续时间的 .slideUp()
动画立即在元素上设置 height: 0
。
希望这对您有所帮助。
为任何感兴趣的人回答我自己的问题,这是代码:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
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;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
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.1/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>
我使用 toggleClass
和 removeClass
来添加我想要的动画,这就是翻译(这个想法最初来自 Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
我有一个下拉菜单,我想在单击“菜单”按钮时向下滑动,再次单击时向上滑动。单击文档中的其他任何位置时也向上滑动。
这是我目前得到的: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()
and .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)
行,它基本上应用了0
持续时间的.slideUp()
动画立即在元素上设置height: 0
。
希望这对您有所帮助。
为任何感兴趣的人回答我自己的问题,这是代码:
$(function() {
$('.dropdown').hide();
$('.dropdown-toggle').click(function(e) {
$('.dropdown').slideToggle(400);
$('.dropdown-toggle').slideDown('active');
$('.dropdown').toggleClass('is-active');
return false;
});
$(document).click(function() {
if ($('.dropdown').is(':visible')) {
$('.dropdown', this).slideUp();
$('.dropdown').removeClass('is-active');
}
});
});
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;
}
.dropdown {
position: absolute;
margin-top: .5em;
background: #777;
min-width: 12em;
padding: 0;
top: 0;
left: 0;
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s
}
.dropdown.is-active {
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
display: block
}
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.1/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>
我使用 toggleClass
和 removeClass
来添加我想要的动画,这就是翻译(这个想法最初来自 Slide and Push Menu tutorial):
-webkit-transform: translateY(-60px);
-ms-transform: translateY(-60px);
transform: translateY(-60px);
transition: transform .3s