如何用jQuery在桌面上隐藏汉堡包菜单？
[英]How to hide hamburger menu on desktop with jQuery?
问题描述
I'm practicing with jQuery. 
我正在练习jQuery。 I wanted to created a simple navbar, like the Bootstrap navbar for example. 我想创建一个简单的导航栏，例如Bootstrap导航栏。 I want an hamburger menu on mobile and a "normal" menu on desktop, but I'm blocked. 我想在移动设备上使用汉堡包菜单，在桌面上使用“普通”菜单，但我已被阻止。
I don't know how to set a normal menu with inline list items at the right of the h1. 我不知道如何使用h1右侧的内联列表项设置普通菜单。 I tried to put something like this: if ($(window).width <= 860) { on jQuery but it doesn't work. 我试图把这样的东西： if ($(window).width <= 860) { on jQuery但它不起作用。
JSFiddle here: https://jsfiddle.net/l_wel/kzLs5jou/ JSFiddle： https ：//jsfiddle.net/l_wel/kzLs5jou/
EDIT: I solved the problem thanks to your advice to use CSS media queries. 编辑：由于您建议使用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>
3 个解决方案
解决方案1
0 2017-03-09 15:59:38
You were close with if ($(window).width <= 860) . 你接近if ($(window).width <= 860) 。 Note that width is a method, not a property, so it needs parentheses: 请注意， width是一个方法，而不是属性，因此它需要括号：
if($(window).width() <= 860) {
$('span#toggleMenu').hide();
}
A better way to accomplish this would be with media queries : 媒体查询的更好方法是：
<style>
@media (max-width: 860px) {
span#toggleMenu {
display: none;
}
}
</style>
解决方案2
0
The following code works for me: 以下代码适用于我：
if(window.innerWidth <= 860) {
}
解决方案3
0 2017-03-09 16:10:05
You can handle nav change with css using media queries, and then you just need to toggle ul on button click. 您可以使用媒体查询使用css处理nav更改，然后您只需要在按钮单击时切换ul 。
$('span#toggleMenu').on('click', function(e) { $('ul').slideToggle(); });
.container { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; width: 75%; } #toggleMenu { display: none; } span { float: right; cursor: pointer; } ul { list-style-type: none; margin: 0; padding: 0; clear: both; text-align: center; } li { font-size: 1.5em; } @media(max-width: 768px) { #toggleMenu { display: block; } ul { display: none; } nav { position: relative; } ul { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); } } @media(min-width: 768px) { ul { display: flex !important; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.