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就绪函数中。此外，在较新版本的jQuery中不推荐使用.toggle()：

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

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

    $("#trigger").click(function(){
         $(this).next(".hiddencontainer").slideToggle("slow");     
    });
});

Answer 2

确保触发切换和单击在document.ready中。

扩展框脚本的问题

2 个答案: