Попытка скрыть рамку с помощью jquery, когда меню находится над

У меня есть страница с набором кадров, который состоит из двух кадров; верхняя рама и нижняя рама. В верхней рамке есть меню с подменю. Проблема, с которой я столкнулся, заключается в том, что нижняя рамка не позволяет подменю выпадать, как следует. Я мог бы расширить размер верхней рамки, но руководство не хочет этого. Поскольку кажется, что раскрывающееся меню не может отображаться поверх нижнего меню, лучший способ заставить его работать - это скрыть нижнюю рамку при расширении верхней рамки. Это только теория. Я никогда раньше не работал с asp.net или фреймами, поэтому, если честно, я не уверен, сработает ли это или нет.

Существует отдельная страница для frameset и frames, и это выглядит так:

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

Я не получаю ошибок от этого, но ничего не происходит. Это даже не ударил анонимную функцию.

Буду признателен, если кто-нибудь скажет мне, что я делаю неправильно.

Источник

2 ответа

Если вы используете frameset и frames, у вас будут такие проблемы. Написание кода JS/Jquery - это просто обходной путь, и, откровенно говоря, не очень хороший.

Есть какая-то конкретная причина, почему вы используете это?

Вы пытались использовать главные страницы ASP.NET, чтобы иметь общее меню и использовать его на разных страницах? Если это неосуществимый вариант, пытались ли вы использовать iframe? В основном html-файле создайте свое меню, а под тегом div/table вашего меню добавьте iframe. В этом iframe будут отображаться разные страницы, которые вы сейчас показываете в #bottomFrame.

Источник

Вы ставите $ раньше (function() в вашем коде? $(function() {}) срабатывает, когда документ проанализирован и готов, без него ваша функция не будет работать. Также вам не нужно использовать getElementById('bottomFrame').style.visibility в jQuery есть довольно короткий и элегантный способ редактировать правила CSS, используя css(property, value), Также не забудьте поставить ; в конце ваших заявлений. Весь код выглядит так:

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

ОБНОВЛЕНИЕ: Если я вас правильно понял, вы хотите скрыть 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");
        });
    });
Источник
Другие вопросы по тегам