Question

我的页面上有一个CSS sucker fish side-menu。当用户点击页面中的某个项目时，我弹出一个jQuery UI对话框，在页面上的div内我通过jQuery AJAX加载一个HTML页面。

在Chrome中，每当我点击菜单上的某个项目时，焦点就会从菜单转移到jQuery UI对话框中。

但是在IE和Opera中，即使点击了该项目，焦点仍然在菜单上。 jQuery UI对话框无法将焦点从菜单移开，因此它保持打开状态并阻碍用户的视图。

请查看附件图片。

enter image description here

正如你所看到的，我甚至添加了一个文本框并抓住了那里的焦点，但即便如此也没有变化。

示例：当您在IE 9中打开网站时，点击了技术＆gt; MySQL 或技术＆gt; MSSQL ，菜单没有关闭，但它应该因为我在div中加载页面时打开一个模态对话框。但是如果你用chrome打开页面并尝试相同的东西，菜单就会关闭。附加相关代码段： -

/**********************************************
Function to load an html page inside a div
**********************************************/
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction) {
    var parentDiv = $("#" + containerDiv);
    var loadDiv = $("#" + divToLoadIn);
    var dialogBox = $("#" + loadingDialog);
    // Show dialog box first, then fadeOut, then load, then fadeIn,the close.
    $(dialogBox).data('loadDiv', loadDiv).dialog("open");
    $(loadDiv).load(pageToLoad, function (response, status, xhr) {
        if (response == "error") {
            $(dialogBox).dialog('close');
        }
        else {
            if (callBackFunction != null) {
                callBackFunction();
            }            
            checkAndDisplay(loadingDialog, divToLoadIn);
        }
    });
}

初始化jquery-ui对话框的函数。

/**************************************
Function to initialize the dialog box
*****************************************/
function initializePleaseWaitDialog() {
    $("#osmPleaseWait").dialog({
        autoOpen: false,
        modal: true,
        dialogClass: 'noTitleDialog',
        draggable: false,
        resizable: false
    });
}

切换DIV显示的功能

/***************************************
Function to toggle div display
****************************************/
function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    $("#" + dialogToHide).dialog("close");
}

更新＃3：我尝试了另一种方式，在菜单项的点击事件上，我隐藏了所有辅助div。

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div**
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

然后我更新了checkAndDisplay中的代码，删除了我之前添加的显示属性，但它仍然不起作用。

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + dialogToHide).dialog("close");
    $("#" + divToShow).css('display', 'block');
    $(".secondaryMenuContainer").css('display', '');
}

此处是页面的标记。

<div class="osmListContainerSpecial">
            <div class="osmListHeader" id="osmListHeaderServices">
                Our Services
            </div>
            <div class="mainCatHeader">
                Software Development
            </div>
            <%-- Technologies --%>
            <div class="secondCatHeader">
                Technologies
                <div class="secondaryMenuContainer" id="softwareDevTech">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
                        <div class="osmMenuObject">
                            .NET/ C#
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div class="osmMenuObject">
                            MS-SQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" />
                            <div class="shortMenuDesc">
                                We have been working with SQL for over 6 years now.</div>
                        </div>
                        <div class="osmMenuObject">
                            MySQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" />
                            <div class="shortMenuDesc">
                                Open Source Database for faster, hassle-free deployment.</div>
                        </div>
                        <div class="osmMenuObject">
                            Silverlight
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            MVC
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Azure
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Applications --%>
            <div class="secondCatHeader">
                Applications
                <div class="secondaryMenuContainer" id="softwareDevApp">
                    <div class="secondaryMenu">
                        <div id="appMsCRM" class="osmMenuObject">
                            Microsoft CRM
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div id="appQb" class="osmMenuObject">
                            QuickBooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appGP" class="osmMenuObject">
                            Great Plains
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSP" class="osmMenuObject">
                            Sharepoint
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appXero" class="osmMenuObject">
                            Xero
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appFB" class="osmMenuObject">
                            Freshbooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSF" class="osmMenuObject">
                            SalesForce
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appNav" class="osmMenuObject">
                            Navision
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Independent Software Testing --%>
            <div class="mainCatHeaderWithoutChild">
                Independent Software Testing
                <input type="hidden" value="ServicesHTML/Testing.html" />
            </div>
            <%-- Technnical Documentation --%>
            <div class="mainCatHeaderWithoutChild">
                Technnical Documentation
                <input type="hidden" value="ServicesHTML/Documentation.html" />
            </div>
            <%-- Case Studies --%>
            <div class="mainCatHeaderWithChild">
                Case Studies
                <div class="secondaryMenuContainer">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e">
                        <div class="osmMenuObject">
                            Media - Astral
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Waste Disposal - RGMRM
                            <input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Insurance - IAAH
                            <input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Housing Providers - TalonPro
                            <input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Education and Training - Met Film
                            <input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Bates
                            <input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Atdec
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

如果您需要任何其他代码或有任何其他疑问，请与我们联系。

Answer 1

这似乎是一种竞赛条件。我不确定＆＃34;为什么＆＃34;部分，但这似乎克服了这个问题：

将checkAndDisplay函数替换为以下版本：

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    setTimeout(function(){
        $("#" + dialogToHide).dialog("close");
    },500);
}

编辑：似乎Internet Explorer没有刷新＆＃34; hover＆＃34;状态，除了鼠标移动。这是一个可重复的样本。尝试单击不同浏览器中的绿色区域，不要移动鼠标。 http://jsfiddle.net/5LR8Z/

我没有找到针对该特定错误的任何解决方案。作为一种解决方法，我会尝试手动关闭菜单（在点击处理程序上设置一个变量，以便知道在checkAndDisplay函数中关闭哪个菜单）。

Answer 2

好的，因为没有适当的解决方法。这就是我为避免问题所做的工作。有些人可能会认为它有些黑客，但我找不到任何其他解决方案。

如果您查看第3次更新，我将隐藏辅助菜单

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div || THIS WAS NEW
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

现在在document.ready()事件中，我正在添加另一个事件。

        $(".secondCatHeader,.mainCatHeaderWithChild").hover(function () {      
            $(this).children(".secondaryMenuContainer").css('display', '');
        })

现在这样做，只要我们将鼠标悬停在其中一个菜单项上，并且它有一个类.secondaryMenuContainer的子项，它就会清除该类的内联显示。所以我之前设置的display:none将被清除。我用IE 9.0和Opera测试了它，它似乎工作正常。

谢谢大家。

Answer 3

据我所知，您在第1101行和第1109行之间存在CSS冲突。您已将.secondaryMenuContainer设置为DISPLAY: none;，但在{{1}时将其设置为DISPLAY: block; }}

jQuery UI对话框不会否定.secondCatHeader:hover;条件，因此您的hover永远不会恢复为.secondaryMenuContainer

DISPLAY: none;无法正常工作，因为它设置了无效的内联样式，因此浏览器会恢复显示有效的外部样式，在这种情况下为$(".secondaryMenuContainer").css('display', '');，因为用户的DISPLAY: block;仍未完整。如果您希望hover简单地级联回其.secondaryMenuContainer状态，则必须中断用户的悬停。

一种方法是在对话框加载时创建一个空DISPLAY: none;; z-index高于占据整个窗口的div的索引。然后，当对话框淡出时，您将删除.secondaryMenuContainer。这应该打破用户的悬停并允许div的样式级联回div

编辑：由于这是jQuery UI，模式框应该加载DISPLAY: none;，这正是我所描述的。该函数在.ui-widget-overlay的堆栈中被调用，但它并没有像预期的那样停止页面交互。

jQuery对话框无法捕获控件 - IE 9.0

3 个答案: