jquery代码工作在codepen / jsfiddle但不是html页面 [英] jquery code works on codepen/jsfiddle but not html page
本文介绍了jquery代码工作在codepen / jsfiddle但不是html页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的可折叠jquery div程式码适用于代码和 JSFiddle ，但是当我将所有内容复制到我的页面（内容适配）时，div不会展开。
My code for collapsible jquery div works on codepen and JSFiddle, but when I copy everything to my page (content adapted), the div does not expand. What am I missing, or where did I go wrong?
头部中的脚本标记如下：
<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一起的东西。
Please advise on how to fix this? Am I missing something crucial that goes along with jquery.
推荐答案
您需要将代码包装在准备好的处理程序中：
You need to wrap your code inside ready handler:
$(document).ready(function(){
//your code here
});
或
$(function(){
//your code here
});
这篇关于jquery代码工作在codepen / jsfiddle但不是html页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
