jQuery 隐藏/显示代码在 Internet Explorer 中不起作用答案

【问题标题】：jQuery hide/show code not working in Internet ExplorerjQuery 隐藏/显示代码在 Internet Explorer 中不起作用
【发布时间】：2013-02-20 00:01:57
【问题描述】：

为什么下面的代码可以在 Chrome 和 Firefox 中运行，但在 IE 中不行？我该如何解决这个问题？

我看不到任何输出错误。

相关 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>

完整代码（来自浏览器）

<!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 &amp; 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 &amp; 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 &amp; 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 &amp; Management Development</a></li>
                        <li><a href="/training/reg_tech.htm">Regulatory &amp; 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>&copy; 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>

【问题讨论】：

它在 IE9 上为我工作
似乎也适合我。
还要准确解释“不起作用”的含义。您希望它与哪个版本的 Explorer 一起使用？哪个版本的 jQuery？

标签： jquery html internet-explorer

【解决方案1】：

您的 HTML 代码无效：

<a id="drop" class="show_hide" href="#drop">
  ...
<a id="drop" class="show_hide" href="#drop">
  ...

这很可能不起作用，因为您复制了名为 drop 的 id。每个id 必须在页面上是唯一的，否则浏览器呈现变得非常不可预测。它还解释了为什么没有 jQuery/JavaScript 错误，但没有任何效果。重复的 id 被从 DOM 中丢弃，并且 jQuery 无法找到元素。

仅在页面上使用唯一的id，或者尝试将其改为class：

<a class="show_hide drop" href="#drop"> ...

工作演示：http://jsfiddle.net/yfa32/

编辑：

您的 HTML 仍然无效，这导致资源管理器中的 jQuery DOM 遍历失败...

<ul class="relatedInfoLinks">
    <li>...</li>
    <div class="slidingDiv"> ... </div>
    <li>...</li>
    <div class="slidingDiv"> ... </div>
</ul>

您不能将<div> 作为<ul> 的直接后代...as per the spec，只有<li> 可以是<ul> 的直接后代。将这些 div 更改为 li。

新更新的 jsFiddle：http://jsfiddle.net/yfa32/1/

验证 HTML 是解决任何跨浏览器问题（尤其是资源管理器问题）之前的第 1 步。

编辑 2：

由于修复了所有 HTML 验证错误并没有解决 OP 的问题，我认为 .toggle() 正在尝试打开然后立即关闭元素，因为前面的 .hide() 的干扰。

无论如何，重构代码更有意义，并且它运行更顺畅，没有任何先前的闪烁。我使用.not() 来排除点击的当前目标，从而将该部分留给.toggle() 进行全面评估。

我自己使用非常相似的东西，它在 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/

【讨论】：

我已经完成了这些更改，但问题仍然存在。
它适用于 Chrome 和 Firefox，但不适用于 IE。我已将其范围缩小到“$(this).parent().next”
我在 IE8 和 jquery-1.6.4.js 中测试
@sephiith，您的页面是否有任何HTML validation 错误？ Explorer 讨厌无效的 HTML，它可以解释 jQuery 无法使用 parent().next() 正确遍历 DOM。
我已将整个来源添加到帖子中。大量的 html 验证错误，但没有一个会影响它。

【解决方案2】：

确保包含您的：http://code.jquery.com/jquery-latest.js

 <!DOCTYPE html><html><head>  <style>  div { background:#def3ca; margin:3px; width:80px;  display:none; float:left; text-align:center; }  </style>  <script src="http://code.jquery.com/jquery-latest.js"></script></head><body>   <button id="showr">Show</button>  <button id="hidr">Hide</button>  <div>Hello 3,</div>   <div>how</div>  <div>are</div>  <div>you?</div><script>$("#showr").click(function () {  $("div").first().show("fast", function showNext() {    $(this).next("div").show("fast", showNext);  });}); $("#hidr").click(function () {  $("div").hide(1000);});</script> </body></html>

在这里测试一下：

http://api.jquery.com/show/

【讨论】：

如果它可以在 Chrome 和 Firefox 上运行，为什么会有问题？
如果他的 jQuery 已经过时，他也会看到 JavaScript 错误。