我正在练习 jQuery。我想创建一个简单的导航栏，例如 Bootstrap 导航栏。 我想要在移动设备上有一个汉堡菜单，在桌面上有一个“普通”菜单，但我被阻止了。
我不知道如何在 h1 右侧设置一个带有内联列表项的普通菜单。我尝试输入这样的内容:if ($(window).width <= 860) {在 jQuery 上，但它不起作用。
JSFiddle在这里:https://jsfiddle.net/l_wel/kzLs5jou/
编辑:由于您使用 CSS 媒体查询的建议，我解决了问题。
$(function () {
$('ul').hide();
$('span#toggleMenu').on('click', function (e) {
$('ul').slideToggle();
});
});.container {
margin: 0 auto;
width: 75%;
}
h1 {
float: left;
}
span {
float: right;
cursor: pointer;
margin-top: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
clear: both;
text-align: center;
}
li {
margin-bottom: 20px;
font-size: 1.5em;
}<body>
<header class="container">
<h1>Toggle Navbar</h1>
<nav id="navbar">
<span id="toggleMenu"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-48.png" alt="menu"></span>
<ul>
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item">Item5</li>
</ul>
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>最佳答案
您与 if ($(window).width <= 860) 关系密切。请注意width是方法，而不是属性，因此需要括号:
if($(window).width() <= 860) {
$('span#toggleMenu').hide();
}
实现此目的的更好方法是使用 media queries :
<style>
@media (max-width: 860px) {
span#toggleMenu {
display: none;
}
}
</style>
关于javascript - 如何使用 jQuery 隐藏桌面上的汉堡菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42699783/