如何防止元素在asp菜单中动态添加类

Question

我花了几个小时来解决这个问题，但没有成功。我是第一次开发asp菜单。一切都很好，但当我悬停在Menu项.高亮显示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>

此asp:menu在网页中显示为UL（无序列表）和LI（列表）。

对于上述代码，网页中呈现的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>

在这种情况下，我需要的是，当我悬停在菜单Dashboard时，子菜单项Tasks和Call Backs将显示，因为类level2 dynamic的UL样式将更改为display:block。同时，一个名为突出显示的类被动态添加到标记中，类名变为class="popout level1 static highlighted"，也会通过asp:菜单功能自动添加。当鼠标离开"控制面板"菜单时，添加的高亮显示类将动态自动删除。我不知道突出显示的类是如何添加到标签中的。我的问题是停止将突出显示的类动态添加到标记中，因为我需要将level2中相应ul标记的样式保留为display:block。

添加高亮显示的类时，类名为*level2 dynamic的ul的样式*更改为显示：块。但是，当鼠标离开菜单时，它将变为display：none。

在我的项目中，我必须将选定的菜单及其子菜单保持为显示：块，直到单击另一个菜单。

我已经使用JQUERY使子菜单显示：块的选定菜单。

我需要知道如何停止或阻止将突出显示的类添加到a标记中。我认为我们可以通过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，即使我将其设置为display:block，它也无法被阻止。它不显示任何内容。因此，在这种情况下，添加突出显示的类是令人担忧的。

因此，我必须停止将突出显示的类添加到锚标记中，这样样式就不会更改。

添加高亮显示的类并没有引起任何担忧，但如果删除，ul样式将变为display:none。我不知道为什么。。。？

请在这些问题上帮助我。。

提前感谢…：）

Answer 1

我用这个代码做了这个简单的动画：

        $("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)
        })