gpt4 book ai didi

Jquery 切换按钮图像和 Div 显示/隐藏

转载 作者:太空宇宙 更新时间:2023-11-04 11:51:37 25 4
gpt4 key购买 nike

我正在尝试创建一个切换按钮图像,它也显示和隐藏一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com