我有这个滑动切换功能:
jQuery(document).ready(function(){
jQuery(".menu-trigger").click(function (){
jQuery(".nav-menu").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
如果我删除“400, function()”,效果很好,当我点击菜单触发器时,菜单出现。但是添加它后,菜单出现然后消失的速度太快,我希望它像标准导航下拉菜单一样显示。
这是我的媒体查询 CSS:
@media screen and (max-width: 480px) {
.menu-trigger{ /*displays menu-trigger as a block but only when max-width is
hit */
display: block;
color: white;
background-color: #5978cf;
padding: 10px;
text-align: left;
font-size: 83%;
cursor: pointer;
}
div.nav-menu{ /*hides nav-menu when under 480px */
display: none;
}
.div.nav-expanded{
display: block;
}
div.nav-menu ul li {
float: none;
border-bottom: 2px solid #d5dce4;
}
div.nav-menu ul li:last-child{
border-bottom: none;
}
}
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix{
*zoom:1;
}
我认为它与“400”有关,但我看过有关此过程的文章和视频,它们似乎都有效,所以不明白为什么我的无效。
最佳答案
您删除了 jQuerys slideToggle() 设置的显示设置,这就是菜单被隐藏的原因。从代码中删除它,它应该可以正常工作。
您面临的下一个问题是您的 CSS。考虑像本示例中那样的“移动优先”方法来避免此类问题。
在此示例中,在宽度大于 480 像素的窗口上显示“MENU WRAPPER”,而“按钮”在较窄的窗口上隐藏,按钮显示并切换菜单。
jQuery(document).ready(function(){
jQuery(".menu-trigger").click(function (){
jQuery(".nav-menu").slideToggle('fast', function(){
jQuery(this).toggleClass("nav-expanded");
});
});
});
.menu-trigger{
display: block;
color: white;
background-color: #5978cf;
padding: 10px;
text-align: left;
font-size: 83%;
cursor: pointer;
}
.nav-menu{
display: none;
background: green;
padding:6px;
}
.nav-menu.nav-expanded{
display: block;
}
@media screen and (min-width: 480px) {
.menu-trigger{
display:none;
}
.nav-menu{
display: block!important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu-trigger">BUTTON</div>
<div class="nav-menu">MENU WRAPPER</div>
关于jquery - SlideToggle 导航菜单消失得太快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40041515/