Question

我有这个slidetoggle功能：

  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”有关，但我看过这个过程的文章和视频，它们似乎都有效，所以不明白为什么我的不行。

Answer 1

删除jQuerys slideToggle（）设置的显示设置，以及隐藏菜单的原因。从代码中删除它，它应该工作正常。

你面临的下一个问题是你的css。首先考虑一下“移动设备”。像这个例子中的方法来避免那些问题。

在这个示例中，在宽度大于480px的窗口上，＆＃34; MENU WRAPPER＆＃34;在＆＃34;按钮＆＃34;隐藏在一个较窄的窗口上，按钮显示并切换菜单。

＆＃13;

jQuery(document).ready(function(){
  jQuery(".menu-trigger").click(function (){
    jQuery(".nav-menu").slideToggle('fast', function(){
      jQuery(this).toggleClass("nav-expanded");
    });
  });
});

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

SlideToggle导航菜单消失得太快

1 个答案: