0

作成しようとしたスクリプトで問題が発生しましたが、何が問題なのかわかりません。「もっと読む」ボタン/リンクをクリックしてdivボックスを展開することです。

これは私が使用しているスクリプトです:

$(document).ready(function(){

$(".hiddencontainer").hide(); 
        });
          $("#trigger").toggle(function(){
                  $(this).addClass("active");
                  }, function () {
                  $(this).removeClass("active");
          });
          $("#trigger").click(function(){
                  $(this).next(".hiddencontainer").slideToggle("slow");     
});

================================================== ================================

これは私がこれに使用しているCSSです:

.readmore{
  font-size: 12pt;
  color: #000000;
  text-align: right;
}

.hiddencontainer{
  color: #000000;
}

================================================== ================================

最後になりましたが、私が使用している HTML は次のとおりです。

    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <h3>Software repair</h3>
          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
          <p class="readmore" id="trigger"><a href="#" />Read more</a></p>
<div class="hiddencontainer">
     <p>Here goes whatever you want to expand/collapse</p>
     </div>
   </div>
 </div>
</div>

誰かが私を正しい方向に押してくれませんか?

4

2 に答える 2

1

イベント ハンドラーを DOM 対応関数内に配置します。また、.toggle()jQuery の新しいバージョンでは非推奨です。

$(document).ready(function(){
    $(".hiddencontainer").hide(); 

    $("#trigger").toggle(function(){
         $(this).addClass("active");
    }, function () {
         $(this).removeClass("active");
    });

    $("#trigger").click(function(){
         $(this).next(".hiddencontainer").slideToggle("slow");     
    });
});
于 2013-10-10T22:52:22.687 に答える
0

トリガーのトグルとクリックが document.ready 内にあることを確認してください。

于 2013-10-10T22:55:16.277 に答える