javascript - jQuery slideDown、リンクで機能しない

Question

編集：行方不明でした }）; 最後に、間違いを教えてくれた Petr に感謝します

次の HTML コードがあります。

 <a href='#' class='button_flat'> Why Choose Us </a>
<div class='whyus'> Lorem Ipsum </div>

そして、これは私のjQueryです

$(document).ready(function(){
            $(".button_flat").click(function(){
            $(".whyus").slideDown();
            });

CSS

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
    }
    .whyus {

        display:none;

    }

コードが機能しない理由がわかりません。誰かが私を助けてくれれば幸いです。

Answer 1

});jqueryの最後に忘れていたからです。を使用することをお勧めしtoggleます。.whyus div が表示されている場合は、ボタンをもう一度クリックすると上にスライドします。

ライブデモ

$(document).ready(function(){
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

Answer 2

これが編集されたコードです。アンカー タグの位置が固定され、ページの読み込み時にドロップダウンが非表示のままになります。

<a href='#' class='button_flat'> Why Choose Us </a>
<br><br>
<div class='whyus'> Lorem Ipsum </div>

CSS

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
        position:fixed;
    }
    .whyus {

        display:none;

    }

jquery

$(document).ready(function(){
     $(".whyus").hide();
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

デモ これが役立つことを願っています

ありがとうございました

Answer 3

試す

<a href='#' class='button_flat'> Why Choose Us </a>
 <div class='whyus' style="display:none;"> Lorem Ipsum </div>

$(document).ready(function () {
$(".button_flat").click(function () {
    $(".whyus").slideDown();
 });
});

デモ

Answer 4

event.preventDefault(); を追加します。クリックリスナー関数の最後で、ブラウザが継続するデフォルトのクリック動作を停止します。

$(document).ready(function(){
    $(".button_flat").click(function(){
      $(".whyus").slideDown();
      event.preventDefault();
    });
});