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 回答