Jquery 切换按钮图像和 Div Show/Hide
Jquery Toggle Button image and Div Show/Hide
我正在尝试创建一个切换按钮图像,它也显示和隐藏 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;
}
如何让它再次隐藏 "nav"?
使用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>
我正在尝试创建一个切换按钮图像,它也显示和隐藏 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;
}
如何让它再次隐藏 "nav"?
使用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>