Question

我正在尝试将带有jQuery加载功能的div i变成jQuery手风琴。

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

的index.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>

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

Answer 1

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

$(document).ready(function () {
    $("#nav").load("nav.html", function () {
        $("#accordionNav").accordion({
            heightStyle: "content",
            collapsible: true,
            active: 1
        });
    });
});

Answer 2

你应该在完成.load（）之后调用accordion函数，因为当前两者都是异步调用的，并且在调用.accordion（）函数时，页面上可能不存在html。

jQuery(document).ready(function () {
    jQuery("#nav").load("nav.html", function () {
        jQuery("#accordionNav").accordion({
            heightStyle: "content",
            collapsible: true,
            active: 1
        });
    });
});

如何将jQuery手风琴应用于通过ajax加载的div

2 个答案: