使用 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;

}

和查询：

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

任何帮助都会很棒:)

原文由 user1469270 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 NewUser 发布，翻译遵循 CC BY-SA 3.0 许可协议