jQuery手风琴 - 在IE中运行,而不是FF

时间:2013-06-26 08:11:20

标签: javascript jquery html5 jquery-ui cross-browser

我在 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">&copy</small>
</div>
</footer>

</body>
</html>

在FF中调试时,我注意到在错误控制台中收到错误指向jquery-1.9.1.min.js

'function Validation.prototype.setMask(name,value,blur){//'line 105

的一般方法

任何建议表示赞赏。

由于

1 个答案:

答案 0 :(得分:0)

很抱歉,如果我没有理解您,但我认为问题正在发生,因为您在两个页面中都实现了相同的脚本,请尝试从products.html文件中删除脚本。

相关问题