BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み] jQueryの表示/非表示が機能しない

2022-03-03 02:06:39

質問

私はいくつかのJSとCSSを持つ基本的なhtmlページを持っています。 

$('.expand').click(function() {
  $('.img_display_content').show();
});

@charset "utf-8";

/* CSS Document */

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.img_display_header {
  height: 20px;
  background-color: #CCC;
  display: block;
  border: #333 solid 1px;
  margin-bottom: 2px;
}

.expand {
  float: right;
  height: 100%;
  padding-right: 5px;
  cursor: pointer;
}

.img_display_content {
  width: 100%;
  height: 100px;
  background-color: #0F3;
  margin-top: -2px;
  display: none;
}

<html>

<head>
  <link href="beta.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="img_display_header">
      <div class="expand">+</div>
    </div>
    <div class="img_display_content"></div>
  </div>
  </div>
</body>

</html>

をクリックすると div というクラスで expand は何もしませんが・・・。 また、jQueryのウェブサイトからサンプルコードをコピー＆ペーストしてみましたが、これもうまくいきませんでした。 どなたかこの問題を解決してくれる方はいらっしゃいませんか？

解決方法は？

ドキュメントレディ関数を追加するだけです。 DOM が読み込まれた場合、同じく :visible 擬似的に、簡単な表示・非表示機能を記述することができます。

サンプル 

 $(document).ready(function(){

    $( '.expand' ).click(function() {
         if($( '.img_display_content' ).is(":visible")){
              $( '.img_display_content' ).hide();
         } else{
              $( '.img_display_content' ).show();
         }

    });
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します