Question

我有一个菜单控件，如下所示：

<li id="liReportMain" class="ReportMain" runat="server">
    <a href="" title="Reports">Reports</a>
</li>
<li id="liAEReport" class="SubReport" runat="server">
    <a href="../Reports/AEReport.aspx" title="Reports">AE Report</a>
</li>
<li id="liBUEngagementReport" class="SubReport" runat="server">
    <a href="../Reports/BUEngagementReport.aspx" title="Reports">BU Report</a>
</li>
<li id="liSCReport" class="SubReport" runat="server">
    <a href="../Reports/ScoreCardDiscussionsReport.aspx" title="Reports">ScoreCard Report</a>
</li>
<li id="liRandRReport" class="SubReport" runat="server">
    <a href="../Reports/RandRReport.aspx" title="Reports">R & R Report</a>
</li>

现在，当用户将鼠标悬停在liReportMain上时，下面的报告submenus应该会弹出到右侧。应使用jQuery实现此功能。请帮忙！

Answer 1

$("#liReportMain").mouseover(
    function() {
      $('#liAReport').show();
      /* the same as above with all the elements you want to show*/
    });

如果要在子页面中为子菜单指定特定位置，请将子菜单元素放在div中，并使用css top和left属性进行定位。在上面的函数中，您必须在div元素上使用show方法。

Answer 2

将此添加到CSS以默认隐藏子菜单：

.subReport {
  display: none;
 margin-left: 70px; // adjust this to make it float right properly

}

Jquery：

$("#liReportMain").hover(function() {
  $(".subReport").show();
}, function() {
   $(".subReport").hide();
});

DEMO

使用jQuery为菜单控件设置动画

2 个答案: