1

我正在尝试将带有 jQ​​uery 加载功能的 div i 转换为 jQuery 手风琴。

我不完全确定我做错了什么。我首先将 nav.html 加载到 #nav 然后我尝试将 #nav 变成 jQuery 手风琴。#nav 加载正确，但我似乎无法将其变成手风琴。

索引.html

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(document).ready(function(){
            $("#nav").load("nav.html"); 
        });
        $(document).ready(function(){
            $("#accordionNav").accordion({
                heightStyle: "content",
                collapsible: true,
                active: 1
            });
        });
    </script> 
</head>
<body>
    <div id="nav"></div>
</body>
</html>

导航.html：

<nav>
    <div id="accordionNav">
    <h3>Surveys</h3>
        <div class="accordionDropDown">
            <ul id="surveys">
                <li><a href='Nutritional_Supplement.html'>Nutritional Supplement</a></li>
                <li><a href='Probiotics.html'>Probiotics</a></li>
                <li><a href='.html'>Fatty Acids</a></li>
                <li><a href='Trace_Minerals.html'>Trace Minerals</a></li>
                <li><a href='Fibre_Supplement.html'>Fibre Supplement</a></li>
                <li><a href='Bowel_Supplement.html'>Bowel Supplement</a></li>
                <li><a href='Liver.html'>Liver</a></li>
                <li><a href='Adrenal_Support.html'>Adrenal Support</a></li>
                <li><a href='Digestive_Enzymes.html'>Digestive Enzymes</a></li>
                <li><a href='Cleanse.html'>Cleanse</a></li>
                <li><a href='Immune_Supplement.html'>Immune Supplement</a></li>
                <li><a href='Yeast.html'>Yeast</a></li>
                <li><a href='Stressed.html'>Stressed</a></li>
                <li><a href='Joints.html'>Joints</a></li>
            </ul>
        </div>
    </div>
</nav>
4

2 回答 2

1

使用.load()方法的回调函数：

$(document).ready(function () {
    $("#nav").load("nav.html", function () {
        $("#accordionNav").accordion({
            heightStyle: "content",
            collapsible: true,
            active: 1
        });
    });
});
于 2013-07-04T17:31:55.233 回答
0

you should call accordion function once done with .load() because currently both are called asynchronously and while calling .accordion() function,html may not exist on the page.

jQuery(document).ready(function () {
    jQuery("#nav").load("nav.html", function () {
        jQuery("#accordionNav").accordion({
            heightStyle: "content",
            collapsible: true,
            active: 1
        });
    });
});
于 2013-07-04T17:42:50.670 回答