我正在尝试创建一个切换按钮图像，它也显示和隐藏一个 div。
这是有效的: //html
<body>
<header>
<script>
$(document).ready(function () {
$('a#button').click(function () {
$(this).toggleClass("down");
$("nav").show("slow");
});
});
</script>
<a id="button" title="button"></a>
<nav style="display: none">
<ul>
<li>NAV</li>
</ul>
</nav>
</header>
</body>
//CSS
a {
background-image: url(../images/menu_on.gif);
cursor: pointer;
width: 50px;
height: 50px;
display: block;
}
a.down {
background-image: url(../images/menu_off.gif);
cursor: pointer;
width: 50px;
height: 50px;
display: block;
}
如何让它再次隐藏“导航”？
最佳答案
使用toggle()
$("nav").toggle("slow");
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("down");
$("nav").toggle("slow");
});
});a {
background-image: url(../images/menu_on.gif);
cursor: pointer;
width: 50px;
height: 50px;
display: block;
}
a.down {
background-image: url(../images/menu_off.gif);
cursor: pointer;
width: 50px;
height: 50px;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="button" title="button">a</a>
<nav style="display: none">
<ul>
<li>NAV</li>
</ul>
</nav>关于Jquery 切换按钮图像和 Div 显示/隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30587651/