0

ヘッダーにメニューとサブメニューがある Web サイトに取り組んでいます。

この方法でヘッダーを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 ファイルで動作が停止するのはなぜですか?

4

1 に答える 1

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();
});
于 2012-10-29T22:24:41.673 に答える