jQuery fadeToggle 从一开始就被隐藏

Question

我正在使用 jQuery 中的 fadeToggle 方法创建响应式菜单。当屏幕上的宽度小于 767px 时，屏幕上应该会出现一个按钮。当您按下此按钮时，应该会显示一个菜单。但我的问题是菜单从一开始就是可见的，即使我不希望它是那样的。我试过使用“visibility:hidden;”属性(property)，但这没有用。

如果有人能解决我的问题，我将不胜感激。

这是我的 jQuery 代码:

$(document).ready(function() {
  $('.menuicon').click(function(){
    $('.menuclass').toggleClass('showMe');
    $('.menuclass').fadeToggle('.showMe');

}); 
});

这是CSS代码:

@media screen and (max-width:767px) {
img.menuicon {
    width:80px;
    visibility:visible;
    position:absolute;
    z-index:100;    
}

.menuclass {
    position:absolute;
    top:257px;
    z-index:10;
}

nav ul#meny li a {
    width:150px;
    padding:31px 0px 30px 0px;
    float:left;
    background-color:blue;
    color:#000;
    text-decoration:underline;
    text-align:center;
    font-family: 'Cabin', sans-serif;   
    font-size:1em;
    border-top-style:solid;
    border-right-style:solid;
    border-left-style:solid;
    margin-left:-30px;
}

nav ul#meny li a.lastli {
    border-bottom-style:solid;
}

.showMe { 
    visibility:visible;
}
}

Answer 1

我认为这是因为您应该在 CSS 中使用 display: none 而不是 visibility: hidden。当您淡入和淡出时，jQuery 应用 display: block 或 display: none。