javascript - Jquery 下拉不在服务器上触发，在桌面上工作

Question

我收到了一个用于为客户更新网页的脚本(另一位团队成员编写了 Jquery)，他将他所有的测试文件都交给了我。在本地运行，jquery 下拉菜单(非常简单)工作得很好。

我将代码移植到 ExpressionEngine，但它什么也没做。我知道 Jquery 本身运行良好，因为 slider 和由它提供支持的其他元素可以正常工作。下拉只是不做任何事情。

好奇的是，我将位于 function.js 中的 Jquery 函数插入到命令行中，它起作用了。

所以，如果我在这里错了，请纠正我，它似乎没有在加载时运行该功能？这里有什么想法吗？

$(window).load(function() {
    $('.slider').flexslider({
        animation: "slide",
        slideshowSpeed: 6000,
        animationSpeed: 800,
        pauseOnAction: false
    });

    $('.testimonials .flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 600000,
        animationSpeed: 800,
        pauseOnAction: false,
        directionNav: false
    });

    $('.nav li').hover(function() {
        $('.sub-menu', this).stop(true, true).slideDown();
    }, function() {
        $('.sub-menu', this).slideUp();
    });
});

^ 准系统简单。唯一改变的代码是 html(用于菜单)、CSS(用于样式化子元素)和这个 function.JS 文件。

这是“旧”版本:

$(window).load(function() {
$('.slider').flexslider({
    animation: "slide",
    slideshowSpeed: 6000,
    animationSpeed: 800,
    pauseOnAction: false
});

$('.testimonials .flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 600000,
    animationSpeed: 800,
    pauseOnAction: false,
    directionNav: false
});

});

这样一个微不足道的问题，但它阻碍了我。有什么想法吗？

Answer 1

这可能不会有什么不同，但请尝试将 $(window).load(function() { 更改为 $(document).ready(funciton() { 或 $(function() {

延伸阅读: window.onload vs $(document).ready()

window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera)

此外，确保将 jQuery 选择器包围在 if ($(selector).length) 检查中，如果它们不在页面上，则会导致错误并且脚本将停止处理:

$(function() {
    if ($('.slider').length) {
        $('.slider').flexslider({
            animation: "slide",
            slideshowSpeed: 6000,
            animationSpeed: 800,
            pauseOnAction: false
        });
    };

    if ($('.testimonials .flexslider').length) {
        $('.testimonials .flexslider').flexslider({
            animation: "slide",
            slideshowSpeed: 600000,
            animationSpeed: 800,
            pauseOnAction: false,
            directionNav: false
        });
    };

    if ($('.nav li').length) {
        $('.nav li').hover(function() {
            $('.sub-menu', this).stop(true, true).slideDown();
        }, function() {
            $('.sub-menu', this).slideUp();
        });
    });

});

http://jsfiddle.net/p5JpP/1/