jQuery隐藏/显示代码无法在Internet Explorer中运行 [英] jQuery hide/show code not working in Internet Explorer
本文介绍了jQuery隐藏/显示代码无法在Internet Explorer中运行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么下面的代码可以在Chrome和Firefox中运行而不是IE？
如何解决此问题？
Why would the below piece of code work in Chrome and Firefox but not IE? How would I fix this?
我看不到输出的错误。
相关的jQuery
<script>
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").hide();
$(this).parent().next(".slidingDiv").slideToggle();
});
});
</script>
相关HTML
<ul class="relatedInfoLinks">
<li><a class="drop show_hide" href="#drop">What are the new parts? </a>
<ul class="slidingDiv">
<li>CASR Part 61 – Flight Crew Licensing requirements</li>
<li>CASR Part 64 – Authorisations for non-licenced personnel to operate an aeronautical radio and taxi aircraft. </li>
<li>CASR Part 141 – Pilot flight training other than certain integrated training</li>
<li>CASR Part 142 – Integrated and Multi crew pilot flight training </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Where can I find the new regulations?</a>
<ul class="slidingDiv">
<li>The Regulations are housed on the Com Law website and can be accessed through links on the CASA home page. </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Why is CASA introducing these new regulations?</a>
<ul class="slidingDiv">
<li>align with the International Civil Aviation Organization standards and recommended practices (making licences more transportable for our crews and benefitting local training institutions by attracting foreign pilots to train in Australia),</li>
<li>strengthen licensing and training requirements through the introduction of multi-crew training and flight testing for air transport licences (those required to undertake passenger services) and increased requirements for co-pilots,</li>
<li>improved standards for training organisations with a strong focus on flight activity and aircraft specific competency and the need for greater organisational planning through the requirement for safety and quality assurance systems,</li>
<li>better alignment with modern vocational education and training requirements centred on structured and competency-based training, delivered by competent and qualified instructors and assessed against clearly defined standards, and</li>
<li>address Australian Transport Safety Bureau recommendations through introducing requirements for ratings for low level flying and additional requirements for night time visual flying.</li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Is compliance to the regulations required today?</a>
<ul class="slidingDiv">
<li>The regulations commence on 4 December 2013, therefore no immediate action is required by the aviation industry. </li>
<li>During this period CASA will be developing the communication and education material, building processes, amending CASA procedures manuals and developing guidance material (sample expositions, acceptable means of compliance etc.) for use by industry.
<ul>
<li>Current flight crew license holders will be transitioned to the new Part 61 licence system over a four year period. </li>
<li>Current flight crew training organisations will be allowed three years to comply fully with the additional requirements of Part 141 and 142.</li>
</ul></li>
<li>For existing licence holders the licence they hold on 3 December will still meet the requirements on 4 December.</li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">What is happening before 4 December?</a>
<ul class="slidingDiv">
<li>In the transition period CASA will be further developing the industry advisory material and delivery training and education to key industry members who will be facilitating the implementation and transition. </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">What if I want to know more? </a>
<ul class="slidingDiv">
<li>More detailed information can be found on the CASA website XXXXXXX and you can sign up to received updates on the transition to the new regulations. </li>
</ul>
</li>
</ul>
整个代码（来自浏览器的来源）
Whole code (Source from browser)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Licencing Regulations</title>
<link href="/_lib/styles/text.css" rel="stylesheet" type="text/css" media="screen, print" />
<link href="/_lib/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<style type="text/css" media="screen">
@import url("/_lib/styles/layout_menu.css");
</style>
<!--[if gte IE 5.5]>
<style type="text/css" media="screen">@import url("/_lib/styles/ie.css");</style>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8070993-4']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="/_lib/scripts/jquery-1.6.4.js"></script>
</head>
<body id="secLvl">
<div id="bg">
<div id="wrapper">
<div id="header" class="overflow"> <a href="/index.htm" class="logo">CASA Connect</a>
<div class="search">
<form action="http://act01int013/search/search.cgi" method="get">
<div class="inputBox">
<label for="search">search</label>
<input type="text" name="query" size="20" value="" />
<input type="hidden" name="collection" value="casaconnect" />
<input type="hidden" name="form" value="simple" />
</div>
<input type="image" name="search2" src="/_lib/images/btn_go.gif" class="btn" />
</form>
<div class="user"><strong>Hi, <a href="/mylinks/?pagetitle=Licencing Regulations">test site user</a></strong><br />
20/02/2013 12:12:06</div>
</div> <!-- end search div -->
</div> <!-- end header div -->
<div class="menu">
<ul>
<li class="ourOrganisation"><a class="hide" href="/organisation/index.htm">Our Organisation</a>
<ul>
<li><a href="/organisation/about/index.htm">About us</a></li>
<li><a href="/organisation/messages/index.htm">Director/Deputy Director messages</a></li>
<li><a href="/organisation/reports/index.htm">Reports</a></li>
<li><a href="/organisation/committees/index.htm">Committees & meetings</a></li>
</ul>
</li>
<li class="casaSystems"><a class="hide" href="/systems/index.htm">CASA Systems</a>
<ul>
<li><a href="/systems/ess/index.htm">Aurion ESS</a></li>
<li><a href="/systems/trim/index.htm">TRIM</a></li>
<li><a href="/systems/airs/index.htm">AIRS</a></li>
<li><a href="/systems/fmis/index.htm">FMIS (PeopleSoft)</a></li>
<li><a href="/systems/fmis/index_new.htm">FMIS (TechOne)</a></li>
<li><a href="/systems/eap/index.htm">EAP</a></li>
<li><a href="/systems/fcat/index.htm">FCAT</a></li>
<li><a href="/working/travel/index.htm">Travel</a></li>
<li><a href="/systems/servicelog/timeLOG_help/index.htm">timeLOG</a></li>
<li><a href="/systems/bo/index.htm">SAP BusinessObjects</a></li>
<li><a href="/yourarea/odas/pmb/services/bcs.htm">How do I ask for a system enhancement?</a></li>
</ul>
</li>
<li class="staffHandbook"><a class="hide" href="/working/index.htm">Working @ CASA</a>
<ul>
<li><a href="/working/iwantto/index.htm">I want to know about ...</a></li>
<li><a href="/hr/index.htm">Human Resources</a></li>
<li><a href="/working/newtocasa/index.htm">New Starters</a></li>
<li><a href="/jobs/index.htm">Careers at CASA</a></li>
<li><a href="/yourarea/odas/commservices/index.htm">Communication in CASA
</a></li>
<li><a href="/working/travel/index.htm">Travel</a></li>
<li><a href="/working/property/index.htm">Property & Security</a></li>
<li><a href="/working/awards/index.htm">Employee awards</a></li>
</ul>
</li>
<li class="itInformation"><a class="hide" href="/it/index.htm">IT Centre</a>
<ul>
<li><a href="/it/general/index.htm">General help</a></li>
<li><a href="/it/computers/index.htm">Computers</a></li>
<li><a href="/it/email/index.htm">Email</a></li>
<li><a href="/it/printers/ricoh/index.htm">Photocopiers/printers</a></li>
<li><a href="/it/phones/index.htm">Phones</a></li>
<li><a href="/it/applications/index.htm">Application Support</a></li>
<li><a href="/it/videoconf/index.htm">Video Conference</a></li>
<li><a href="/yourarea/isg/web/web.htm">Web content</a></li>
<li><a href="/it/unified-comms/unified-communications.htm">Unified Communications</a></li>
</ul>
</li> <li class="whatsHappening"><a class="hide" href="/happening/index.htm">What's Happening</a>
<ul>
<li><a href="/happening/clippings/index.htm">Media & Newspaper Clippings</a></li>
<li><a href="/happening/noticeboard/index.htm">Noticeboard</a></li>
<li><a href="/happening/socialclub/index.htm">Social Club</a></li>
<li><a href="/happening/holidays.htm">Public holidays</a></li>
<li><a href="/happening/newsletters/index.htm">Publications/newsletters</a></li>
</ul>
</li>
<li class="training"><a class="hide" href="/training/index.htm">Training</a>
<ul>
<li><a href="/training/courses/schedule.htm">Course Schedule</a></li>
<li><a href="/training/class/class.htm">CLASS</a></li>
<li><a href="/training/courses/internal.htm">Internal courses</a></li>
<li><a href="/training/courses/external.htm">External courses</a></li>
<li><a href="/training/leadership.htm">Leadership & Management Development</a></li>
<li><a href="/training/reg_tech.htm">Regulatory & technical training</a></li>
<li><a href="/training/on-the-job-training.htm">On-the-job Training Program</a></li>
<li><a href="/training/policy.htm">Safety Education policies</a></li>
</ul>
</li>
<li class="casawary"><a class="hide" href="/casawary/index.htm">Casawary</a>
<ul>
<li><a href="/casawary/current/index.htm">Current issue</a></li>
<li><a href="/casawary/archive.htm">Past issues</a></li>
<li><a href="/casawary/search.htm">Search articles</a></li>
</ul>
</li>
</ul>
</div>
<div class="twoColumn">
<p class="breadCrm"><a href="/index.htm">Home</a></p>
<img src="/_lib/images/menu/processes.gif" alt="" width="891" />
<div class="twoColumnRow">
<div class="twoColumnContent">
<div class="contentPad">
<!-- Start of main content -->
<h1>Licencing Regulations</h1>
<h2>Key information</h2>
<p>Must-know facts</p>
<ul class="relatedInfoLinks">
<li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101335">Part 61 Flight crew licensing</a>
<ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101339">Part 61 impact on industry</a></li></ul></li>
<li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101336">Part 64 Authorisations for non-licensed personnel</a>
<ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101340">Part 64 impact on industry</a></li></ul></li>
<li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101337">Part 141 Pilot flight training other than certain integrated training</a>
<ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101341">Part 141 impact on industry</a></li></ul></li>
<li><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101338">Part 142 Integrated and multi crew pilot flight training</a>
<ul><li class="level2"><a href="http://www.casa.gov.au/scripts/nc.dll?WCMS:STANDARD::pc=PC_101342">Part 142 impact on industry</a></li></ul></li>
</ul>
<h2>Key resources</h2>
<ul class="relatedInfoLinks">
<li><a href="/junk/cao/doc/FM_bulletin_2_print.pdf">Standards information on the CASA website</a></li>
<li><a href="/junk/cao/doc/FM_bulletin_2.pdf">External information on the CASA website </a></li>
</ul>
<h2>Contact Us</h2>
<ul class="relatedInfoLinks">
<li><a href="#">Project staff</a></li>
</ul>
<h2>Must-know facts</h2>
<ul class="relatedInfoLinks">
<li><a class="drop show_hide" href="#drop">What are the new parts? </a>
<ul class="slidingDiv">
<li>CASR Part 61 Flight Crew Licensing requirements</li>
<li>CASR Part 64 Authorisations for non-licenced personnel to operate an aeronautical radio and taxi aircraft. </li>
<li>CASR Part 141 Pilot flight training other than certain integrated training</li>
<li>CASR Part 142 Integrated and Multi crew pilot flight training </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Where can I find the new regulations?</a>
<ul class="slidingDiv">
<li>The Regulations are housed on the Com Law website and can be accessed through links on the CASA home page. </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Why is CASA introducing these new regulations?</a>
<ul class="slidingDiv">
<li>align with the International Civil Aviation Organization standards and recommended practices (making licences more transportable for our crews and benefitting local training institutions by attracting foreign pilots to train in Australia),</li>
<li>strengthen licensing and training requirements through the introduction of multi-crew training and flight testing for air transport licences (those required to undertake passenger services) and increased requirements for co-pilots,</li>
<li>improved standards for training organisations with a strong focus on flight activity and aircraft specific competency and the need for greater organisational planning through the requirement for safety and quality assurance systems,</li>
<li>better alignment with modern vocational education and training requirements centred on structured and competency-based training, delivered by competent and qualified instructors and assessed against clearly defined standards, and</li>
<li>address Australian Transport Safety Bureau recommendations through introducing requirements for ratings for low level flying and additional requirements for night time visual flying.</li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">Is compliance to the regulations required today?</a>
<ul class="slidingDiv">
<li>The regulations commence on 4 December 2013, therefore no immediate action is required by the aviation industry. </li>
<li>During this period CASA will be developing the communication and education material, building processes, amending CASA procedures manuals and developing guidance material (sample expositions, acceptable means of compliance etc.) for use by industry.
<ul>
<li>Current flight crew license holders will be transitioned to the new Part 61 licence system over a four year period. </li>
<li>Current flight crew training organisations will be allowed three years to comply fully with the additional requirements of Part 141 and 142.</li>
</ul></li>
<li>For existing licence holders the licence they hold on 3 December will still meet the requirements on 4 December.</li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">What is happening before 4 December?</a>
<ul class="slidingDiv">
<li>In the transition period CASA will be further developing the industry advisory material and delivery training and education to key industry members who will be facilitating the implementation and transition. </li>
</ul>
</li>
<li><a class="drop show_hide" href="#drop">What if I want to know more? </a>
<ul class="slidingDiv">
<li>More detailed information can be found on the CASA website XXXXXXX and you can sign up to received updates on the transition to the new regulations. </li>
</ul>
</li>
</ul>
<!-- End of main content -->
</div> <!-- end contentPad div -->
</div> <!-- end twocolumncontent div -->
<div class="twoColumnLinks">
<div class="quickLinks">
<h3>Quick Links</h3>
<br />
<ul>
<li><a href="http://ess">Staff Directory</a></li>
<li><a href="/tools/index.htm">Tools of the Trade</a></li>
<li><a href="/forms/index.htm">Forms</a></li>
<li><a href="/guidance/index.htm">Workplace Guidance</a></li>
<li><a href="/yourarea/index.htm">Your Area</a></li>
<li><a href="/offices/index.htm">CASA Offices</a></li>
</ul>
</div>
<div class="myLinkssub">
<h3><strong>My</strong> Links</h3>
<ul>
<li><a href='http://casa.gov.au/'>casa.gov.au</a></li>
<li><a href='/forms/'>Forms</a></li>
<li>Custom link 3</li>
<li>Custom link 4</li>
<li>Custom link 5</li>
<li>Custom link 6</li>
<li>Custom link 7</li>
<li>Custom link 8</li>
</ul>
<a href="/mylinks/?pagetitle=Licencing Regulations" class="addMyLinks">Edit <strong>My</strong> Links</a>
</div>
</div> <!-- end twocolumnlinks div -->
</div> <!-- end twocolumnrow div -->
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").hide();
$(this).parent().next(".slidingDiv").slideToggle();
});
});
</script>
</div> <!-- end twocolumn div -->
<div id="footer">
<ul>
<li class="first"><strong>© Copyright 2013 CASA</strong></li>
<!--<li><a href="/footer/update.htm">CASAconnect updates</a></li>-->
<li><a href="mailto:webmaster@casa.gov.au">webmaster@casa.gov.au</a></li>
<li><a href="/footer/privacy.htm">Privacy Policy</a></li>
<li class="last"><a href="/footer/sitemap.htm">Site Map</a></li>
</ul>
</div> <!-- end footer div -->
</div> <!-- end wrapper div -->
</div> <!-- end bg div -->
<!--The following jquery code tracks pdf files -->
<script type="text/javascript">
jQuery(function()
{
jQuery('a[href$=".pdf"]').click(function()
{
_gaq.push(['_trackEvent', 'Download', 'PDF', this.href]);
})
});
</script>
</body>
</html>
推荐答案
您的HTML代码无效：
<a id="drop" class="show_hide" href="#drop">
...
<a id="drop" class="show_hide" href="#drop">
...
因为你复制了<$ c，所以很可能无法正常工作$ c> id 名为 drop 。每个 id 必须在页面上是唯一的，否则浏览器呈现变得非常不可预测。它还解释了为什么你没有得到jQuery / JavaScript错误，但没有任何作用。从DOM中丢弃重复的 id ，并且jQuery无法找到元素。
It's most likely not working because you've duplicated the id called drop. Each id must be unique on the page or browser rendering becomes very unpredictable. It also explains why you get no jQuery/JavaScript errors, but nothing works. Duplicate id's are discarded from the DOM and jQuery fails to find elements.
仅使用唯一的 id 在页面上，或尝试将其更改为类而不是：
Only use unique id's on the page, or try changing it into a class instead:
<a class="show_hide drop" href="#drop"> ...
工作演示： http://jsfiddle.net/yfa32/
Working Demo: http://jsfiddle.net/yfa32/
编辑：
您的HTML 仍然无效，这导致jQuery DOM遍历在资源管理器中失败...
Your HTML is still invalid and that's causing jQuery DOM traversal to fail in Explorer...
<ul class="relatedInfoLinks">
<li>...</li>
<div class="slidingDiv"> ... </div>
<li>...</li>
<div class="slidingDiv"> ... </div>
</ul>
您不能拥有< div> 作为的直接后代< ul> ... 根据规范，只有< li> 可以是的直接后代< UL> 。将这些 div 更改为 li '。
You cannot have a <div> as immediate descendants of <ul>... as per the spec, only <li> can be immediate descendants of a <ul>. Change these div's into li's.
最新更新的jsFiddle： http://jsfiddle.net/yfa32/1/
Newly updated jsFiddle: http://jsfiddle.net/yfa32/1/
经过验证的HTML是在追逐任何跨浏览器问题之前的第1步，，特别是资源管理器问题。
Validated HTML is step 1 before chasing any cross-browser issues, especially Explorer issues.
编辑2：
由于修复所有HTML验证错误没有解决了OP的问题，我认为 .toggle（）正在尝试打开，然后由于前面的 .hide的干扰而立即关闭该元素（ ）。
Since fixing all HTML validation errors have not solved the OP's problem, I think the .toggle() is trying to open and then immediately closes the element due to interference from the preceding .hide().
无论如何，重构代码会更有意义，而且操作更顺畅，没有任何先前的眨眼。我使用 .not（）来排除当前点击的目标，该部分将该部分留到 .toggle（）完全评估。
Anyway, refactoring the code makes a little more sense and it operates more smoothly without any of the previous blinking. I use a .not() to exclude the current target of the click which leaves that part up to the .toggle() to fully evaluate.
我自己使用非常类似的东西，它在资源管理器中工作正常......
I use something very similar myself and it works fine in Explorer...
$(document).ready(function () {
$(".slidingDiv").hide();
$('.show_hide').click(function () {
var ele = $(this).parent().next('.slidingDiv'); //<-- this is the target
$('.slidingDiv').not(ele).slideUp(); //<-- closes everything else except the target
ele.slideToggle(); //<-- toggles the target
});
});
演示： http://jsfiddle.net/yfa32/6/
Demo: http://jsfiddle.net/yfa32/6/
这篇关于jQuery隐藏/显示代码无法在Internet Explorer中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
