我在products.html页面中创建了一个简单的手风琴:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-gb">
<meta charset="utf-8" />
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
</head>
<body>
<div class="page-heading">
<h1 class="wrap">Products</h1>
</div>
<div class="ctr-full">
<form class="wrap createsrc" method="post">
<div id="accordion">
<h3>Product 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.</p>
</div>
<h3>Product 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo.</p>
</div>
<h3>Product 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. </p>
</div>
<h3>Product 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. </p>
</div>
</div>
</form>
</div>
这在 IE、FF 和 Chrome 中出现并起作用。但是,当页面被导入/加载到我的 index.html 页面(到 DIV 中)时,手风琴在 IE 中按预期功能/显示,但始终在 FF 中展开。
Index.html 页面:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<script src="javascript/modernizr-2.6.2.min.js"></script>
<link type="text/css" href="css/redesign-main.css" rel="stylesheet">
<script type="text/javascript" src="javascript/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/redesign_js.js"></script>
<!-- New JavaScript functions to enable dropdown navigation. -->
<script type="text/javascript">
$(document).ready(function(){
$('nav li ul').hide().removeClass('fallback');
$('nav li').hover(
function () {
$('ul', this).stop().slideDown(300);
},
function () {
$('ul', this).stop().slideUp(300);
}
);
});
</script>
<!-- New JavaScript functions to load page from Nav menu into #PageContent DIV -->
<script type="text/javascript">
function getPageContent(a) {
$.get(a, processContent, 'html').fail(function() { alert('There is a problem loading a resource. Please re-try');});
}
function processContent(file_data)
{
$("#PageContent").html(file_data);
}
</script>
</head>
<body>
<!-- MENU START -->
<nav class="site-nav">
<ul class="menu-nav">
<li class="data-sources"><a href="#" title="">Date Sources <span class="icon-caret-down"></span> </a>
<li>
<a onClick="getPageContent(‘products.html')">Products</a>
<ul class="fallback">
<li><a onClick="getPageContent('products.html')"> Products Overview</a></li>
<li><a onClick="getPageContent('existingaccount.html')">Existing Customer</a></li>
<li><a onClick="getPageContent('pricing.html')">Pricing</a></li>
</ul>
</li>
</li>
</ul>
</nav>
<!-- MENU END -->
</div>
<div id="PageContent">
</div>
<footer class="site-footer" role="contentinfo">
<div class="wrap">
<small class="fr">©</small>
</div>
</footer>
</body>
</html>
在 FF 中调试时,我注意到在指向 jquery-1.9.1.min.js 的错误控制台中收到错误
'function Validation.prototype.setMask(name, value, blur){ //105行的通用方法
任何建议表示赞赏。
谢谢