問題與擴展框腳本

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

Answer 2

確保觸發切換，並單擊其內部的document.ready。