使用jQuery在点击时显示ID为#id的div

Question

当点击一个 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>

任何帮助都将不胜感激 :)

- user1469270

---

如果你把这个放进一个$(document).ready()方法中，那么它就会起作用。你遇到了什么问题？ - David Thomas

Answer 1

你遇到的问题是事件处理程序绑定在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演示。

对于淡入淡出：

$(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").fadeToggle();
        });
    });

JS Fiddle演示。

- David Thomas

---

先生，您真是个天才。我能否让它在再次点击时隐藏？ - user1469270

Answer 2

您可以使用 jQuery toggle 来显示和隐藏 div。脚本将如下所示。

  <script type="text/javascript">
    jQuery(function(){
      jQuery("#music").click(function () {
        jQuery("#musicinfo").toggle("slow");
      });
    });
</script>

- NewUser

Answer 3

这是使用以下简单方法显示Div的方式：

$("#musicinfo").show();  //or
$("#musicinfo").css({'display':'block'});  //or
$("#musicinfo").toggle("slow");   //or
$("#musicinfo").fadeToggle();    //or

- Sangeet Shah