為什么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頁面中使用簡單的“ li”選擇器可能不是一個好主意。 您可以將更多選擇器與類或ID關聯起來。

其次，與.click（）相比，我更喜歡使用.on（“ click”，“ li”，function（）{}）。 我對此有更好的經驗。 您可以嘗試一下。

詳細信息： 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版本