我的页面上有一个CSS吸盘鱼边菜单.当用户点击页面中的项目时,我弹出一个jQuery UI对话框,并在页面上的div中,我通过jQuery
AJAX加载
HTML页面.
在Chrome中,当我点击菜单上的某个项目时,焦点就会从菜单转移到jQuery UI对话框上.
但是在IE和Opera中,即使点击了该项目,焦点仍然在菜单上. jQuery UI对话框无法将焦点从菜单中移开,因此它保持打开状态并阻碍用户的视图.
请看附件图片.
正如你可以看到,我甚至添加了一个文本框,并抓住了焦点,但即使如此,没有变化.
根据要求,here is a link to the website.
示例：当您在IE 9中打开网站,并单击说“技术> MysqL或者技术> 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 }); }
/***************************************
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","serviceLoadDiv","osmPleaseWait");
return false;
});
然后我更新了checkAndDisplay中的代码,以删除我之前添加的display属性,但它仍然不起作用.
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>
解决方法
这似乎是一个赛车条件.我不知道“为什么”部分,但这似乎克服了这个问题：
用以下版本替换checkAndDisplay函数：
function checkAndDisplay(dialogToHide,'block');
setTimeout(function(){
$("#" + dialogToHide).dialog("close");
},500);
}
编辑：似乎有一个错误,Internet Explorer不刷新“悬停”状态,除了鼠标移动.这是一个可重复的样品.尝试点击不同浏览器中的绿色区域,不要移动鼠标.
http://jsfiddle.net/5LR8Z/
我没有找到任何解决方案的那个特定的错误.作为解决方法,我会尝试手动关闭菜单(在点击处理程序上设置一个变量,以了解在checkAndDisplay函数上关闭哪个菜单).
