单击jQuery显示div #id

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>

任何帮助都会很棒:)

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小提琴演示.

对于褪色:

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

JS小提琴演示.

Answer 2

您可以使用它jQuery toggle来显示和隐藏div.脚本将是这样的

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