jQuery手风琴–在IE中运行，而不是FF [英] jQuery Accordion – Functioning In IE, Not FF
问题描述
我在 products.html 页面上创建了一个简单的手风琴:
I have created a simple accordion in my products.html page:
<!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中起作用. 但是，当is页面被导入/加载到我的index.html页面(到DIV中)中时，手风琴会按预期在IE中运行/显示，但总是在FF中展开.
This appears and functions in IE, FF and Chrome. However, when is page is imported/loaded into my index.html page (into a DIV), the accordion functions/displays as expected in IE, but is always expanded in 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的错误
When debugging in FF, I have noticed a receive an error in the Error Console pointing to jquery-1.9.1.min.js
‘function Validation.prototype.setMask(name，value，blur){//105行的通用方法
‘function Validation.prototype.setMask(name, value, blur){ //general method for’ line 105
任何建议表示赞赏.
谢谢
推荐答案
很抱歉，如果我对您的理解不正确，但我认为问题正在发生，因为您在两个页面中都实现了相同的脚本，请尝试删除这些脚本来自products.html文件.
Sorry if I didn't understand you right, but I think the issue is happening because you are implementing the same scripts in both pages, try to remove the scripts from the products.html file.
这篇关于jQuery手风琴–在IE中运行，而不是FF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
