1

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){ //汎用メソッド' 105行目

アドバイスをいただければ幸いです。

ありがとう

4

1 に答える 1