Question

我的页面框架由两个框架组成;顶部框架和底部框架。顶部框架有一个带子菜单的菜单。我遇到的问题是底部框架不允许子菜单按原样下降。我可以扩大顶部框架的大小，但管理层不希望这样。由于似乎无法让下拉菜单流过底部菜单，因此我认为使其工作的最佳方式是在展开顶部框架时隐藏底部框架。这只是理论。我之前从未使用过asp.net或框架，说实话，我不确定它是否会起作用。

框架集和框架有一个单独的页面，它看起来像这样：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="dhss.mohsaic.webapplication.mohsaic.DefaultFrameset" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
    <head>
        <title>MOHSAIC</title>
        <link rel="shortcut icon" href="/Images/bavicon.ico"/>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0" />
        <meta name="CODE_LANGUAGE" content="Visual Basic 7.0" />
        <meta name="vs_defaultClientScript" content="JavaScript" />
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" />     
    </head>
    <frameset border="0" framespacing="0" rows="95,*" name="frameset" class="frameset" id="frameset">
        <frame src="<%=HeaderFrameURL%>" scrolling="no" frameborder="0" noresize="noresize" name="fraHeader" />
        <frame src="<%=EntireBodyURL%>" scrolling="auto" frameborder="0" noresize="noresize" name="fraEntireBody" id="bottomFrame" />
    </frameset>
</html>

菜单的html，在单独的文件中：

<div>
    <table id="tblAreaTabs" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px;
        margin: 0px; padding-top: 0px" cellspacing="0" cellpadding="0" width="100%" border="0">
        <tbody>
            <tr>
                <td class="DarkHeader" width="100%" bgcolor="#000000">
                    <asp:Menu ID="mainMenu" Runat="server" Orientation="Horizontal" 
                        DynamicMenuItemStyle-CssClass="ChildLink" StaticMenuItemStyle-Font-Underline="true" StaticMenuItemStyle-CssClass="ParentLink" StaticEnableDefaultPopOutImage="false" 
                        style="text-align:center;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='black', Positive='true');">
                    </asp:Menu>
                </td>
                <td valign="middle" class="DarkHeader">
                    <asp:HyperLink ID="hlError" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
                        ImageUrl="/images/error.gif" BorderWidth="0px" Height="15px">The connection to DSS is not available.</asp:HyperLink><asp:HyperLink
                            ID="hlWarn" runat="server" NavigateUrl="DssStatus.aspx" Target="fraDssStatus"
                            ImageUrl="/images/warn.gif" BorderWidth="0px" Height="15px">The connection to DSS is partially available. </asp:HyperLink>
                </td>
            </tr>
        </tbody>
    </table>
</div>

子菜单是根据用户的登录凭据动态创建的

我已经尝试了几种方法来做我想做的事情。第一个是添加onmouseover =＆＃34; whileHovering（）＆＃34;到asp：menu标签并添加以下javascript：

 var origCols = null;
function whileHovering() {
    //alert("Yes, I'm working");
    if (origCols !== null)
        showFrame();
    else
        hideFrame();
};

function hideFrame() {

    var frameset = parent.document.getElementById("frameset");
    origCols = frameset.rows;
    frameset.rows = "120, 0";   
};
function showFrame() {
    document.getElementById("frameSet").rows = origCols;
    origCols = null;
};

然而，这不起作用。我收到错误＆＃39;无法读取属性＆＃39;行＆＃39;为null。在调查之后，框架集为空，我所做的一切都不会改变它。所以我放弃了这条路线并尝试了：

(function() {
    alert("I have entered the function")
    $('#mainMenu').hover(function () {
        alert('hidden function working')
        $(this).parent.document.getElementById('bottomFrame').style.visibility = "hidden"
    }), function () {
        alert('visible function working')
        $(this).parent.document.getElementById('bottomFrame').style.visibility = "visible"
    }               
 });

我没有得到任何错误，但没有任何反应。它甚至没有打到匿名函数。

如果有人能告诉我自己做错了什么，我将不胜感激。

Answer 1

您是否在代码中加(function()之前的$？解析文档并准备就绪后，$(function() {})将触发，如果没有它，您的功能将无法正常工作。此外，您不需要在jQuery中使用getElementById('bottomFrame').style.visibility，使用css(property, value)编辑css规则的方法非常简短。另外，不要忘记将;放在语句的末尾。整个代码如下所示：

    $(function () {
        alert("I have entered the function");
        $('#mainMenu').hover(function() {
            alert('hidden function working');
            $(this).parent().css("visibility", "hidden");
        }, function() {
            alert('visible function working');
            $(this).parent().css("visibility", "visible");
        });
    });

<强>更新：如果我理解正确你想在隐藏在MainMenu上时隐藏bottomFrame，那么请使用以下代码：

    $(function () {
        alert("I have entered the function");
        $('#mainMenu').hover(function() {
            alert('hidden function working');
            $('#bottomFrame').css("visibility", "hidden");
        }, function() {
            alert('visible function working');
            $('#bottomFrame').css("visibility", "visible");
        });
    });

Answer 2

如果您使用框架集和框架，您将遇到此类问题。编写JS / Jquery代码只是一种解决方法，坦率地说不太好。

您使用它的任何具体原因？

您是否尝试过使用ASP.NET母版页来创建常用菜单并在不同页面上使用它？如果这不是一个可行的选项，你尝试过使用iframe吗？在主html文件中，创建菜单并在菜单的div / table标记下方添加iframe。此iframe将显示您当前在#bottomFrame中显示的不同页面。

当菜单悬停在

2 个答案: