jquery代碼工作在codepen/jsfiddle但不是html頁面

我可摺疊jquery div的代碼適用於codepen和JSFiddle，但是當我將所有內容複製到我的頁面（內容適配）時，div不會展開。我錯過了什麼，或者我錯了什麼地方？jquery代碼工作在codepen/jsfiddle但不是html頁面

的頭我的腳本標記如下：

<head> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 

    <script type="text/javascript"> 
     $(".header").click(function() { 
      $header = $(this); 
      $content = $header.next(); 
      $content.slideToggle(500, function() { 
       $header.text(function() { 
        return $content.is(":visible") ? "Collapse" : "Expand"; 
       }); 
      }); 
     }); 
    </script> 
</head>

而體內我的內容：

<form method="post" action="sales_report.php" enctype="multipart/form-data"> 
    //multiple <input /> fields here 
    <div class="container"> 
     <div class="header"><span>+Options</span></div> 
     <div class="content"> 
      <h3>Designate the Column of:</h3> 
      <p>Account Name</p> 
      <input required type="number" name="sales_report_col_acc" id="sales_report_col_acc" value='1' /> 
      <p>Sale Amount</p> 
      <input required type="number" name="sales_report_col_amt" id="sales_report_col_amt" value='2' /> 
      <p>Sale Date (optional)</p> 
      <input type="number" name="sales_report_col_date" id="sales_report_col_date" value='3' /> 
      </br /> 
     </div> 
    </div> 
    <input type="submit" name="sales_report_submit" value="Go" /> 
</form>

請就如何解決這一問題提出建議？我錯過了一些與jquery相關的關鍵問題。

來源

2014-07-10 user3822774

你需要用準備處理程序中的代碼：

$(document).ready(function(){ 
    //your code here 
});

或者，

$(function(){ 
    //your code here 
});

來源

2014-07-10 03:27:27

感謝，將勾選答案時，這個網站讓我 – user3822774

@ user3822774不客氣！ –

jquery代碼工作在codepen/jsfiddle但不是html頁面

回答

相關問題