Question

我的Jquery在加载时未能隐藏我的移动菜单。我之前使用过此代码并且工作正常 - 只是想知道我错过了什么。任何见解都会有所帮助。谢谢。

JQUERY

var screensize = document.documentElement.clientWidth;

 $(document).ready(function(){

 $(window).resize(function(){   
 if ( width == GetWidth() ) {
    return;
  }
 width = GetWidth();

 if( $(window).width() < 600) {
    $('.link').hide();
} else {
    $('.link').show();
}

}); 

$('header').on('click', function() {
$('.link').slideToggle(500);
e.preventDefault();

});
});

消息来源

<nav>
    <ul id="mobile_active">
            <li class="link"><a href="#">About Us</a></li>
            <li class="link"><a href="#">Creative</a></li>

       <li id="logo"><a href="#"><img src="#.png"/></a></li>

            <li class="link"><a href="#">Portfolio</a></li>
            <li class="link"><a href="#">Contact Us</a></li>
    </ul>
    </nav>

    <header>
        <a class="mobile_menu"></a>
    </header>

CSS

@media (max-width: 600px) {

header {height:35px;    top:185px; display:block;}

nav {position: relative; top: 113px;}   

nav li a {width:100%; padding:0;}

nav ul li {width:100%; padding:0;}

nav ul li a {color: #949c50; font-size:1em; text-align:center;
border-bottom: 1px solid #bbb1a6; display:block; padding:3%; width:94%;}

nav ul li#logo a {border-bottom: none;}

nav li:first-child {padding-top:40px;}

nav ul li a:hover { color: #FFF;background-color:#949c50;}

nav ul li#logo a:hover {background-color:transparent;}

a.mobile_menu {
 display:block;
 width:100%; height:38px;
 background:#a54499
 url(../links/mobile_link_menu.png)no-repeat 4px 4px;
 position:absolute;
 top:165px;
 cursor:pointer;    }

 a.mobile_menu.selected {background-position: 4px -26px;    }


 li#logo {
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: -50px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}
 }

Answer 1

您是否尝试过使用CSS媒体查询而不是使用javascript？即默认情况下将链接的CSS显示设置为无，并在屏幕大小小于或等于600px时使用以下CSS显示。

.link {
 display: none;
}

@media（max-width：600px）{

.link {
 display: visible;
}

}

我希望这会有所帮助。

Answer 2

这是解决方案 - 虽然我仍然不完全理解为什么这段代码有效但我的仍然没有，因为我仍然在与Jquery斗争（如果有人想对此有所了解，那就不胜感激了。我在这里学习）。显然，我需要添加一个已定义的变量和console.log（width）。我在这个网站上找到了这个答案，并且要感谢用户mrtsherman。

$(window).resize(function () {
 var width = $(window).width();
 console.log(width);
 if (width < 600) {
   $('.link').hide();
 } else {
 $('.link').show();
 }
 });

加载时Jquery显示/隐藏失败

2 个答案: