Question

Newb在这里尝试通过调查切换＆＃39;

来学习如何使用jQuery。

我有一个非常简单的html页面，我认为第二个链接会加载为折叠/隐藏，点击它会显示它的内容，但事实并非如此。相反，一切都显示在屏幕上，所有内部html暴露（希望我正确地使用术语）。我相信正在发生的事情是jQuery没有加载，但这只是对业余爱好者的最佳猜测，希望有人可以帮助我实现这一点。

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script>
        $.fn.slideFadeToggle = function(speed, easing, callback) {
            return this.animate({
                opacity: 'toggle',
                height: 'toggle'
            }, speed, easing, callback);
        };

        // Collapse everything but the first menu:
        $("#accordionMenu  li  a").not(":first").find("+ ul").slideUp(1);

        // Expand or collapse:
        $("#accordionMenu  li  a").click(function() {
            $(this).find("+ ul").slideFadeToggle("500");
        });
    </script>

</head>
<body>
    <div id="firstDiv">
        <div id="secondDiv">
            <ul id="accordionMenu">
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a>
                    <ul>
                        <li><a href="#">suboption 1</a></li>
                        <li><a href="#">submenu expandable</a>
                        <ul>
                            <li><a href="#">suboption 1</a></li>
                            <li><a href="#">suboption 2</a></li>
                        </ul>
                    </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>

Answer 1

您的代码需要位于dom ready handler。在您的情况下，您尝试在dom中加载这些元素之前将事件处理程序添加到目标元素，因此这些处理程序将不会被注册。

//dom ready handler
jQuery(function ($) {
    $.fn.slideFadeToggle = function (speed, easing, callback) {
        return this.animate({
            opacity: 'toggle',
            height: 'toggle'
        }, speed, easing, callback);
    };

    // Collapse everything but the first menu:
    $("#accordionMenu  li  a").not(":first").find("+ ul").slideUp(1);

    // Expand or collapse:
    $("#accordionMenu  li  a").click(function () {
        //use .next() here
        $(this).next("ul").slideFadeToggle("500");
    });
})

演示：Fiddle

为什么没有切换切换？

1 个答案: