試圖隱藏一個框架與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菜單被懸停時

回答

相關問題