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>

网页中的这个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>

在这我需要的是，当我悬停菜单仪表板时，将显示子菜单项任务和回调，因为具有类level2 动态的 UL 的样式更改为display:block。同时，一个名为highlight的类被动态添加到标签中，类名称变为 class="popout level1 static highlight"并且也由 asp:menu 功能自动添加。当鼠标离开仪表板菜单时，添加的突出显示的类将被动态自动删除。我不知道如何将突出显示的类添加到tag中。我的问题是停止添加突出显示的类动态放入标签中，因为我需要将level2中对应ul标签的样式保持为display:block。

添加高亮类后，类名* level2 dynamic * 的ul 样式变为display:block。但是当鼠标离开菜单时，它变成了 display:none。

在我的项目中，我必须将所选菜单及其子菜单保留为 display:block，直到单击另一个菜单。

我使用 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。不知道为什么……？

请帮我解决这些问题..

提前致谢...：）

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 回答