【发布时间】：2017-08-17 04:06:09
【问题描述】：
我制作了一个按钮，它必须使用 jQuery 在网站的移动版本中打开菜单，但它无法以任何方式工作。 我只是用这个按钮和菜单来调试新项目，它工作正常，而且我找不到这段代码和原始代码之间的任何区别。
我的大脑很痛，请告诉我为什么这个按钮不起作用以及我应该如何处理它。 （我将弹出菜单替换为爆炸只是为了查看按钮是否有效）
我正在使用 jQuery UI。
$(document).ready(function() {
$('#menu-icon').click(function() {
$('header').toggle('explode');
});
});nav {
margin-left: -35px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#menu-icon {
background: url(../img/mobile-menu.png) no-repeat;
position: absolute;
left: -9999px;
width: 0px;
}
nav li {
display: inline;
}
nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}
#login {
position: absolute;
top: 5px;
right: 0;
}
nav h3 {
text-indent: -9999px;
}
nav h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}
nav h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}
nav h3 a:hover {
background-color: white;
}
nav a {
font-family: 'Cormorant Infant', serif;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 15px 5px;
}
nav a:hover {
background-color: #e8e8e8;
}
@media only screen and (max-width: 768px) {
nav {
height: 90px;
}
nav ul {
visibility: hidden;
}
nav .left-nav {
margin-top: -5px;
visibility: visible;
padding-top: 0;
}
nav #login {
letter-spacing: -1px;
font-size: 50px;
padding: 40px 0;
top: -35px;
margin-right: 55px;
}
nav h3 a {
left: -73px;
}
#menu-icon {
width: 78px;
height: 65px;
display: block;
left: 15px;
margin-top: 15px;
}
header h3 {
text-indent: -9999px;
}
.news {
width: 100%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="container">
<header>
<h3 id="menu-icon">
<a href="#"></a>Меню</h3>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li>
<h3>
<a href="#"></a>Корзина</h3>
</li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
<ul class="mob-menu hidden">
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
</ul>
</nav>
<div class="banner">
<a href="#" id="left"></a>
<!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a>
<!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=selected>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</header>
</body>【问题讨论】：
-
请先花费more time researching，然后再提出关于 SO 的问题。如果您阅读过 jQuery API，您就会知道
.toggle不是正确的函数。 -
我添加了 .toggle 只是为了查看按钮是否可点击。
-
重读我刚刚写的。切换是错误的功能。它不会做你认为它会做的事情。我什至 链接 到 jQuery API，这样您就可以阅读
toggle函数的作用。它不会帮助您“查看按钮是否可点击”，请选择其他功能。 -
好的，如果我用 toggleClass 替换它（这正是我想要做的）它仍然无法工作。如果我将#menu-icon 替换为任何其他元素，比如说“标题”，它会完全按照我点击它时的想法。
-
关键不是按钮不工作的原因