使用 jQuery 单击时显示 div #id

Posted 2023-02-21

【中文标题】使用 jQuery 单击时显示 div #id

【英文标题】：Show div #id on click with jQuery

【发布时间】：2012-08-27 13:25:39

【问题描述】：

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

任何帮助都会很棒:)

【问题讨论】：

如果你把它包装成一个$(document).ready() 方法，那么它就会起作用。你遇到了什么问题？

【参考方案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 demo.

对于褪色：

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

JS Fiddle demo.

【讨论】：

您先生，真是个天才。有没有办法让它在再次点击时隐藏？

【参考方案2】：

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

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

【参考方案3】：

这是显示 Div 的简单方法：-

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