使用 jQuery 在单击时显示 div #id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12237163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show div #id on click with jQuery
提问by David says reinstate Monica
When a div is clicked, I want different div to appear.
单击 div 时，我希望出现不同的 div。
Thus, when '#music' is clicked, I want '#musicinfo' to appear.
因此，当单击“#music”时，我希望出现“#musicinfo”。
Here is the css:
这是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;
}
and jquery:
和jQuery：
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>
Any help whatsoever would be great :)
任何帮助都会很棒:)
回答by David says reinstate Monica
The problem you're having is that the event-handlers are being bound before the elements are present in the DOM, if you wrap the jQuery inside of a $(document).ready()then it should work perfectly well:
您遇到的问题是在元素出现在 DOM 之前绑定了事件处理程序，如果您将 jQuery 包装在 a 中，$(document).ready()那么它应该可以很好地工作：
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").show("slow");
});
});
An alternative is to place the <script></script>at the foot of the page, so it's encountered after the DOM has been loaded and ready.
另一种方法是将 放在<script></script>页面的底部，以便在 DOM 加载并准备好之后遇到它。
To make the divhide again, once the #musicelement is clicked, simply use toggle():
要div再次隐藏，#music单击元素后，只需使用toggle()：
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").toggle();
});
});
And for fading:
对于褪色：
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").fadeToggle();
});
});
回答by NewUser
You can use jQuery toggleto show and hide the div. The script will be like this
您可以使用jQuery toggle来显示和隐藏 div。脚本将是这样的
<script type="text/javascript">
jQuery(function(){
jQuery("#music").click(function () {
jQuery("#musicinfo").toggle("slow");
});
});
</script>
回答by Sangeet Shah
This is simple way to Display Div using:-
这是显示 Div 的简单方法：-
$("#musicinfo").show(); //or
$("#musicinfo").css({'display':'block'}); //or
$("#musicinfo").toggle("slow"); //or
$("#musicinfo").fadeToggle(); //or
