1

この問題を解決するために何時間も費やしましたが、成功しませんでした。初めてaspメニューを開発しています。すべて問題ありませんが、メニュー項目にカーソルを合わせると、 .highlighted css クラスが対応する要素に動的に追加されます。これが私のコードです：

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="1" StaticSubMenuIndent="10" Orientation="horizontal" RenderingMode="List" CssClass="MenuClass">
 <Items>
       <asp:MenuItem Text="Dashboard" Target="" Value="Dashboard">
             <asp:MenuItem Text="Tasks" Value="Tasks"></asp:MenuItem>
              <asp:MenuItem Text="Call Backs" Value="Call Backs"></asp:MenuItem>
       </asp:MenuItem>

       <asp:MenuItem Text="Application" Value="Application">
              <asp:MenuItem Text="New" Value="New"></asp:MenuItem>
              <asp:MenuItem Text="View" Value="View"></asp:MenuItem>
       </asp:MenuItem>
 </Items>
</asp:Menu>

Web ページのこのasp:menuは、UL (順序なしリスト) および LI (リスト) としてレンダリングされます。

上記のコードの場合、Web ページに表示される html 形式は次のとおりです。

<div class="MenuClass" id="Menu1" >
     <ul class="level1 static" role="menubar" >
       <li class="has-popup static" role="menuitem" >
          <a class="popout level1 static" href="#">Dashboard</a>
           <ul class="level2 dynamic" style="display:none">
              corresponding lists:  TASKS and CALLBACKS
           </ul>
       </li>
     </ul>

        Viceversa the ul and li for the Application MENUITEM are rendered as html 
</div>

これで必要なのは、ダッシュボードのメニューにカーソルを合わせると、サブメニューアイテムのタスクとコールバックが表示されることです。これは、クラスlevel2 の動的なUL のスタイルがdisplay:blockに変更されるためです。同時に、強調表示されたという名前のクラスがタグに動的に追加され、クラス名は class="popout level1 static Highlight"になり、asp:menu 機能によって自動的に追加されます。マウスがダッシュボード メニューから離れると、追加された強調表示されたクラスが動的かつ自動的に削除されます。強調表示されたクラスがタグに追加される方法がわかりませんでした。私の問題は、強調表示されたものを追加するのをやめることですクラスを動的にタグに挿入します。これは、対応する ul タグのスタイルを level2 で display:block として保持する必要があるためです。

強調表示されたクラスが追加されると、クラス名* level2 dynamic * の ul のスタイルが display:block に変更されます。ただし、マウスがメニューから離れると、display:none になります。

私のプロジェクトでは、別のメニューがクリックされるまで、選択したメニューとそのサブメニューを display:block として保持する必要があります。

JQUERY を使用して、選択したメニューのサブメニューを display:block にしました。

強調表示されたクラスをタグに追加するのを停止または防止する方法を知る必要があります。jqueryで実現できると思います。

 $(document).ready(function () {

    if ($(".popout").hasClass("selected")) {
         $("a.popout.level1.selected.static").next("ul").css("display", "block");
    }

    if ($(".popout").hasClass("highlighted")) {
         $("a.popout.level1.selected.static.highlighted").next("ul").css("display","block");
    }

     $("a.popout.level1.selected.static.hihglighted").mouseout(function () {
                $("a.popout.level1.selected.static.highlighted").next("ul").css("display", "block");
                $("a.popout.level1.selected.static").next("ul").css("display","block");
                if ($("a.popout.level1.selected.static.highlighted").next("ul").css("display", "none")) {
                    $(".test").css("display", "block");
                }
            });
});

ここで、マウスがメニューを離れると、強調表示されたクラスが動的に削除され、ul の css が自動的に display:none として取得されます。何も表示されません。したがって、強調表示されたクラスの追加は、この場合の懸念事項です。

スタイルが変更されないように、強調表示されたクラスのアンカータグへの追加を停止する必要があります。

強調表示されたクラスの追加は問題ありませんでしたが、削除すると ul スタイルが display:none になります。どうしてか分かりません...？

これらの問題について私を助けてください..

前もって感謝します...：）

4

1 に答える 1

0

私はそのコードでこの簡単なアニメーションを行いました:

        $("ul.level1 li a").mouseenter(function () {
            var ulhight = $(this).next("ul").height();
            $(this).next("ul").css({  "height": "0px", "overflow": "hidden" });
            $(this).next("ul").animate({ height: ulhight }, 300)
        })
于 2013-09-08T15:30:13.413 に答える