Question

我正在开发一个在标题上有菜单和子菜单的网站。

我正在以这种方式加载html头文件（此脚本位于html文件的底部）：

    <script type="text/javascript">
        $('#header').load('includes/header.html', function(){
        });
    </script>

问题是当我以这种方式加载标题时，这个脚本（如果我在同一个html上有标题就行了）会停止工作（这个脚本在main.js文件中）：

    function mainmenu(){
    // hide submenu
    $(" ul#mainnav ul ").css({display: "none"});
    // Defino que submenus deben estar visibles cuando se pasa el mouse por encima
    $(" ul#mainnav li").hover(function(){
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            $(this).find('ul:first').slideUp(400);
        });
    }
    $(document).ready(function(){
        mainmenu();
    });

为什么在加载的html文件上它会停止工作？

Answer 1

您可能希望使用on来确保元素“始终”具有绑定到它们的事件。例如，我认为你需要这样的东西：

function mainmenu() {
    $("#header").on({"mouseenter": function () {
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
    }, "mouseleave": function () {
        $(this).find('ul:first').slideUp(400);
    }}, "ul#mainnav li");
}

$(document).ready(function(){
    mainmenu();
});

加载的内容会破坏子菜单切换

1 个答案: