为什么jQuery在Chrome中的Sharepoint 2010网站上工作，但不是IE？

Question

我有一个包含此代码的Sharepoint 2010 webpart内的txt文件，它可以在Chrome中正常工作，但不在IE 11中。我点击我的“li”元素并在Chrome中发生动画，但在IE中没有任何反应。我试图在Sharepoint Designer中将此标签添加到网站，但它没有帮助：meta http-equiv =“X-UA-Compatible”content =“IE = Edge”。有谁知道什么可以解决这个问题？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator --> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$("li").click(function(){ 
$("li").animate({backgroundColor:"#F5F5F5"}, "fast"); 
$("li").css("color", "#676767"); 
$(this).animate({backgroundColor:"#3A7CD2"}, "fast"); 
$(this).css("color", "#FFFFFF"); 
$("#RightContentsContainer").slideUp(300); 
$("#RightContentsContainer").show("slide", { direction: "left", easing: 'swing'}, 600);  
}); 

$("#ListItem1").click(function(){$("#GuildCategoryHeader").hide().html("AFM").fadeIn(500);}); 
$("#ListItem2").click(function(){$("#GuildCategoryHeader").hide().html("ASA").fadeIn(500);}); 
$("#ListItem3").click(function(){$("#GuildCategoryHeader").hide().html("Chicago IA/Teamsters").fadeIn(500);}); 
$("#ListItem4").click(function(){$("#GuildCategoryHeader").hide().html("Commercials").fadeIn(500);}); 
$("#ListItem5").click(function(){$("#GuildCategoryHeader").hide().html("DGA").fadeIn(500);}); 
$("#ListItem6").click(function(){$("#GuildCategoryHeader").hide().html("Dues").fadeIn(500);}); 
$("#ListItem7").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood Basic Crafts").fadeIn(500);}); 
$("#ListItem8").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood IA").fadeIn(500);}); 
$("#ListItem9").click(function(){$("#GuildCategoryHeader").hide().html("Labor Contracts").fadeIn(500);}); 
$("#ListItem10").click(function(){$("#GuildCategoryHeader").hide().html("Other Unions").fadeIn(500);}); 
$("#ListItem11").click(function(){$("#GuildCategoryHeader").hide().html("National IA").fadeIn(500);}); 
$("#ListItem12").click(function(){$("#GuildCategoryHeader").hide().html("New York IA/Teamsters").fadeIn(500);}); 
$("#ListItem13").click(function(){$("#GuildCategoryHeader").hide().html("Non-Affiliate").fadeIn(500);}); 
$("#ListItem14").click(function(){$("#GuildCategoryHeader").hide().html("Non-Union").fadeIn(500);}); 
$("#ListItem15").click(function(){$("#GuildCategoryHeader").hide().html("SAG-AFTRA").fadeIn(500);}); 
$("#ListItem16").click(function(){$("#GuildCategoryHeader").hide().html("San Francisco").fadeIn(500);}); 
$("#ListItem17").click(function(){$("#GuildCategoryHeader").hide().html("Studio-Specific Contracts").fadeIn(500);}); 
$("#ListItem18").click(function(){$("#GuildCategoryHeader").hide().html("WGA").fadeIn(500);}); 
}); 
</script> 

<style type="text/css"> 

a li{text-decoration: none;color:#676767;} 

#guildlinesDiv{border: 2px solid #5A7EAD !important;} 
#FAQDiv{border: 2px solid #5A7EAD !important;} 
#headlinesDiv{border: 2px solid #5A7EAD !important;} 
#contractsDiv{border: 2px solid #5A7EAD !important;} 
#archivesDiv{border: 2px solid #5A7EAD !important;} 

#ListItem1{background-color:#3A7CD2;color:#FFFFFF;} 
#ListItem2{background-color:#F6F8FE;} 
#ListItem3{background-color:#F6F8FE;} 
#ListItem4{background-color:#F6F8FE;} 
#ListItem5{background-color:#F6F8FE;} 
#ListItem6{background-color:#F6F8FE;} 
#ListItem7{background-color:#F6F8FE;} 
#ListItem8{background-color:#F6F8FE;} 

</style> 

<div id="LeftHandAbsoluteMenuContainer" style="position: relative; top: 0px; left:15px; height:380px; width:290px "> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/DropDownArrow.png" style="position: absolute; top: 7px; left:18px; height:28px;width:28px; z-index: 1;"/> 
<p style="position: absolute; top: 9px; left:76px; z-index: 1; font-size: 17px;">Select Category</p> 
<ul style="position: absolute; top: 41px; left:-18px; width: 245px; z-index: 1; font-size: 14px; list-style-type: none;"> 

<a style="text-decoration:none;" href="#"><li id="ListItem1">AFM</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem2">ASA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem3">Chicago IA/Teamsters</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem4">Commercials</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem5">DGA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem6">Dues</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem7">Hollywood Basic Crafts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem8">Hollywood IA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem9">Labor Contracts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem10">Other Unions</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem11">National IA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem12">New York IA/Teamsters</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem13">Non-Affiliate</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem14">Non-Union</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem15">SAG-AFTRA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem16">San Francisco</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem17">Studio-Specific Contracts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem18">WGA</li></a> 

</ul> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerRectangle.png" style="position: relative; top: 0x; left:0px; height:41px;width:290px;"/> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerSquare.png" style="position: relative; top: 0px; left:0px; height:332px;width:290px;"/> 
</div> 


<p style="position: absolute; left:335px; top:118px; width:505px; font-size: 14px;">This site is designed to provide access to Labor Contracts and Payroll Guidelines. We are always looking for ways to provide better tools to facilitate our work. Please send any suggestions to <a href="mailto: RPucher@ep.com?Subject=Labor%20Relations%20site%20suggestions">Bob Pucher</a>.</p> 
<p id="GuildCategoryHeader" style="position: absolute; left:352px; top:182px; width:445px; font-size: 14px; font-weight:bold;text-align:center;color:#215582">AFM</p> 


<div id="RightContentsContainer" style="position: absolute; left:342px;top:216px; height: 310px;" > 
<div id="contractsDiv" style="float: left; height:116px; margin-left:10px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Contracts</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/contract.jpg" alt=""/> 
</div> 
<div id="guildlinesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px; color:#215582;">Guidelines</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/guidelines.jpg" alt=""/> 
</div> 
<div id="archivesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Archives</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/archive.jpg" alt=""/> 
</div> 

Answer 1

首先，在所有的，在SharePoint页面上，使用一个简单的“礼”选择可能是一个坏主意。你可以用一个类或一个id来更多地选择你的选择器。其次，我更喜欢使用.on（“click”，“li”，function（）{}）而不是.click（）。我有更好的经验。你可以试试看。

的更多信息： http://api.jquery.com/on/

Answer 2

我用jQuery的以下版本作为我的代码首先声明，并得到了一切工作：

https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

我猜IE不喜欢Jquery的版本3.1.1