jQuery Accordion – Functioning In IE, Not FF

问题

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>

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 page:

<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>

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){ //general method for’ line 105

Any advice appreciated.

Thanks

回答1:

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.

来源：https://stackoverflow.com/questions/17314831/jquery-accordion-functioning-in-ie-not-ff

标签

javascript

jquery

html5

jquery-ui

cross-browser