19

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>

どんな助けでも素晴らしいでしょう:)

4

3 に答える 3

56

あなたが抱えている問題は、要素がDOMに存在する前にイベントハンドラーがバインドされていることです。jQueryをa内にラップすると、$(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フィドルデモ。

于 2012-09-02T15:26:50.257 に答える
6

を使用jQuery toggleして、div の表示と非表示を切り替えることができます。スクリプトは次のようになります

  <script type="text/javascript">
    jQuery(function(){
      jQuery("#music").click(function () {
        jQuery("#musicinfo").toggle("slow");
      });
    });
</script>
于 2012-09-02T15:41:29.110 に答える