0

マスターページに次のコードがあります。

jQuery:

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).find("ul").slideDown("slow"); },
        function () { $(this).find("ul").slideUp("slow"); }
    );
});

HTML:

<ul class="menu" runat="server" id="Menu">
    <li class="first" runat="server"><asp:HyperLink runat="server" NavigateUrl="/index.aspx">Home</asp:HyperLink></li>
    <li class="submenu" runat="server">
        <asp:HyperLink runat="server" NavigateUrl="/categories/index.aspx">Products</asp:HyperLink>
        <ul runat="server">
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category1.aspx">Dogs</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category2.aspx">Category 2</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category3.aspx">Category 3</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category4.aspx">Category 4</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category5.aspx">Category 5</asp:HyperLink></li>
            <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category6.aspx">Category 6</asp:HyperLink></li>
         </ul>
    </li>
    <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/contact.aspx">Contact Us</asp:HyperLink></li>
</ul>

これを変更するtoggle("slide")と、マウスがli.submenu. これは、要素が確実に存在し、タイプミスがないことを意味します。ただし、slideDown および slideUp 機能は機能していないようです (低速が超高速を意味しない限り...)。

jQuery と jQuery UI 用に含めているファイルは、jquery-1.4.2.js と jquery-ui-1.7.2.custom.min.js です。これで十分ですね。

ユーザーがJSを持っていない場合に備えて、サブメニューを即座に表示または非表示にすることを指定するCSSがあります（display: block;/ ）。display: none;これが問題を引き起こしている可能性はありますか? JS が有効になっている場合に CSS が動作できないように、JS を使用してサブメニューのクラスを変更する必要がありますか? または、CSS が原因ではない他の問題がありますか?

4

3 に答える 3

3

編集

このソリューションは、テストしたので実際には機能しません。マウスがリンクの外に出たときにサブメニューが表示されたままになるようにする必要があります。この場合、そうではありません。ふりだしに戻る..

実際、私の元のソリューションが機能することが判明しましたが、

$("ul li.submenu ul").toggle(0);

その前に（これにより、メニューが反対に設定され、ユーザーが気付かないうちに元の状態に戻ります）。奇妙ですが、私はそれで暮らすことができます。

元の答え

しばらくして、一体何が問題なのだろうとコードを長い間眺めていたところ、 内の直接のリンクli.submenuが に設定されdisplay: block、幅と高さが 100% に設定されていることに気付きました。実際に変更する必要があったのはこれであり、jQuery は次のようになります。

$(document).ready(function () {
    $("li.submenu > a").hover(
        function () { $(this).closest("li.submenu").find("ul").slideDown("slow"); },
        function () { $(this).closest("li.submenu").find("ul").slideUp("slow"); }
    );
});

これで...問題は解決しました。ただし、スライドの指示を取得するのに 1 ～ 2 秒かかるようです。これは単に、ページの読み込みから 1 ～ 2 秒以内に誰かがli.submenuカーソルを合わせると、スライドするのではなく、すぐにメニューが表示されることを意味しますが、それは問題ではないと思います。

これが将来誰かに役立つことを願っています。

于 2010-11-30T09:04:18.787 に答える
0

jQuery アニメーションはテーブルに適用できないことを忘れないでください (display: table。失敗することもあります)。

于 2015-03-16T09:53:27.690 に答える
0

あなたのページのliulアイテムの中にあると思います。ulcurrent の親をスライドさせたい場合はli、試してください

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).parents("ul").slideDown("slow"); },
        function () { $(this).parents("ul").slideUp("slow"); }
    );
});
于 2010-11-30T08:29:06.467 に答える