使用jQuery在单击时显示div #id
使用jQuery在单击时显示div #id
提问于 2012-09-02 23:22:54
当一个div被点击时，我希望出现不同的div。
因此，当'#music‘被点击时，我希望'#musicinfo’出现。
下面是css：
#music {
float:left;
height:25px;
margin-left:25px;
margin-top:25px;
margin-right:80px;
font-family: "p22-underground",sans-serif;
font-style: normal;
font-weight: 500;
font-size:13pt;
}
#musicinfo {
width:380px;
margin:25px;
font-family: "p22-underground",sans-serif;
font-style: normal;
font-weight: 500;
font-size:13pt;
line-height:1.1;
display:none;
}和jquery：
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>任何帮助都是非常好的:)
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-09-02 23:26:50
你遇到的问题是，事件处理程序在元素出现在DOM中之前就被绑定了，如果你把jQuery包装在$(document).ready()中，那么它应该工作得很好：
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").show("slow");
});
});另一种方法是将<script></script>放在页面的底部，这样在加载并准备好DOM之后就会遇到它。
要使div再次隐藏，单击#music元素后，只需使用toggle()
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").toggle();
});
});JS Fiddle demo。
对于淡入淡出：
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").fadeToggle();
});
});JS Fiddle demo。
Stack Overflow用户
发布于 2012-09-02 23:41:29
您可以使用jQuery toggle来显示和隐藏div。脚本将如下所示
<script type="text/javascript">
jQuery(function(){
jQuery("#music").click(function () {
jQuery("#musicinfo").toggle("slow");
});
});
</script>Stack Overflow用户
发布于 2015-10-16 15:26:31
这是显示的简单方法，使用：-
$("#musicinfo").show(); //or
$("#musicinfo").css({'display':'block'}); //or
$("#musicinfo").toggle("slow"); //or
$("#musicinfo").fadeToggle(); //or页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12237163
复制相关文章
相似问题
腾讯云开发者
