javascript - 扩展框脚本的问题

Question

我尝试制作的脚本出现问题，但我不知道它似乎出了什么问题。它是关于通过单击“阅读更多”按钮/链接来扩展一个 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>

有人可以把我推向正确的方向吗？

Answer 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");     
    });
});