jqueryはなぜInternet ExplorerではなくSharepoint 2010サイトで動作しますか？

Question

私はSharepoint 2010ウェブパーツの内部にこのコードを含むtxtファイルを持っています。これはChromeでは正しく動作しますがIE 11では動作しません。 "li"要素をクリックして、クロムでアニメーションが発生しますが、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ページに簡単な「LI」セレクタを使用することは悪い考えかもしれません。あなたはクラスやIDを使ってセレクタをもう少し親切にすることができます。

第2に、.click（）よりも.on（ "クリック"、 "li"、function（）{}）を使用することをお勧めします。私はそれについてより良い経験をしています。あなたはそれを試すことができます。

詳細情報： http://api.jquery.com/on/

Answer 2

私はコードで私の最初の文としてのjQueryの以下のバージョンを使用し、それが動作するようにすべてのものを得た：

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

私はIEが好きではなかったと思います012：JScriptのバージョン3.1.1