试图隐藏一个框架与jquery菜单被悬停时

我有一个框架，由两个框架组成的页面;顶部框架和底部框架。顶部框架有一个带有子菜单的菜单。我遇到的问题是底部框架不允许子菜单按照他们的意愿下降。我可以扩大顶部框架的大小，但管理层不希望这样做。由于看起来不可能让下拉菜单在底部菜单上流动，所以我能想到的使其工作的最佳方式是在展开顶部框架的同时隐藏底部框架。但这只是理论。在此之前，我从未使用过asp.net或框架，说实话，我不确定它是否会起作用。试图隐藏一个框架与jquery菜单被悬停时

没有为框架和框架单独的页面，它看起来像这样：

<%@ 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 =“whileHovering（）”到ASP：菜单标签，并添加以下的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; 
};

但是，这并不工作。我收到错误'无法读取属性'行'的空。调查后，框架集为空，我做的任何事情都不会改变这一点。于是我放弃了这条道路上，并尝试：

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

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

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

来源

2015-11-06 comfortablyNumb

您是否在$ (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"); 
     }); 
    });

UPDATE：如果我理解正确的话，你要隐藏bottomFrame当MainMenu的悬停，然后使用此代码：

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

来源

2015-11-06 16:55:36 user2771704

啊拍。这就解释了为什么它没有进入这个功能。谢谢。所以它进入函数，然后进入函数来隐藏框架，当我把它悬停在它上面。不幸的是，它没有做任何事情。我试过你的代码，它的工作原理，但它在错误的框架上工作。我需要隐藏底部框架。谢谢你的代码，但因为它让我看到父母没有做我做过的事情，虽然它会这样做 – comfortablyNumb

@comfortablyNumb不客气。你能再试一次吗？有一个小的语法错误，我修正了（缺少）括号） – user2771704

它隐藏了错误的框架。它隐藏了菜单完美的顶部框架。我需要做的是隐藏底部框架。任何想法如何我可以访问该框架？ document.getElementById（'bottomFrame'）。style.visibility =“hidden”不起作用。我尝试用$（this）.document.getElementById（'bottomFrame'）.css（“visibility”，“hidden”）替换.parent（）。但它不承认getElementById（'bottomFrame'） – comfortablyNumb

如果使用框架和框架你会有这样的问题。编写JS/Jquery代码只是一种解决方法，坦率地说不太好。

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

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

来源

2015-11-06 17:24:38

您正在向合唱团先生传教！如果我有我的方式，我会彻底检修整个网站。这是古老的。但是，我只能做他们允许我做的事情。我仍然试图将管理层变成你所提到的途径之一。 – comfortablyNumb

试图隐藏一个框架与jquery菜单被悬停时

回答

相关问题