jQuery函數toggle（）在Wordpress網站中不起作用

Question

我無法在我的wordpress網站上使該toggle（）函數正常工作，盡管它可以在Codepen中工作。 這是代碼：

<style>    
footer {
background: #163774; 
color: #ffffff; 
font-weight: bold;  
border-top-left-radius: 15px;
border-top-right-radius: 15px;
position: fixed;   
text-align: center; 
transition: 2s bottom;
}

.minimizer {
background-color:#FC7F0C; 
padding: 3px; 
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-bottom: 5px;
cursor: pointer; 
}
</style>


<footer class="hidden">
    <div class="minimizer">

   <h1>Header</h1>
   </div>

    <span class="form_content">
        Text Here
    </span>
</footer>


<script>
    $('.minimizer').click(function() {
      $('span.form_content').toggle()
    });
</script>

我的腳本來源正確，而jQuery庫則在header.php模板文件中。 我在Codepen中使用了相同的代碼，並且可以正常工作，但是當我將其全部放入網站時，它將無法正常工作。

Answer 1

將您的函數包裝在jQuery .ready（）方法中，以便在DOM完全加載后執行。

<script>
  $(function() {
    $('.minimizer').click(function() {
     $('span.form_content').toggle();
    });
 });
</script>