jQuery IE7 滑动问题

Question

我已经尝试了常见的方法来尝试让它发挥作用。 Zoom:1、min-height 等都无济于事。 有人有什么想法吗？ （是的，p 标签中的 span 下的标记很糟糕。它是远程提要，我无法更改它。）

HTML：

<div id="faqsContentWrapper">
    <ul id="faqsContent">                           
                            <li class="faqTitle"><a href="#"><img src="/link_bullet_arrow.png">How do I open the GIS map in ?</a></li>
                             <div class="moreInfo"> 
                                <span class="dateAdded">Date Added: Fri, 03 Jun 2011 05:11:36 GMT</span>
                                <p><p><span style="LINE-HEIGHT: 19px"><font face="verdana">Each GIS map is available in a format that can be displayed in any 3D earth viewer, such as Google Earth™, Microsoft® Bing™, Maps for Enterprise, and NASA's World Wind.</font></span></p></p>
                            </div>

                            <li class="faqTitle"><a href="#"><img src="/link_bullet_arrow.png">: Unable to retrieve school code</a></li>
                             <div class="moreInfo"> 
                                <span class="dateAdded">Date Added: Tue, 02 Nov 2010 03:18:15 GMT</span>
                                <p><p>If you are unable to retrieve your please submit a <a href="http://www." target="_blank">Support Request via this link.&#160;</a></p><p><br></p></p>
                            </div>

                            <li class="faqTitle"><a href="#"><img src="link_bullet_arrow.png">Where can I view Self-Help Tutorials & Resources?</a></li>
                             <div class="moreInfo"> 
                                <span class="dateAdded">Date Added: Fri, 17 Sep 2010 04:47:57 GMT</span>
                                <p><p>View Self-Help Tutorials &amp; Resources for <a href="http:///" target="">nnnn</a>.</p></p>
                            </div>
                        </ul>

                </div>

JavaScript：

$(document).ready(function() {
$('.faqTitle').click(function() {
    $('.faqTitle').removeClass('on');
    $('.moreInfo').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
     }        
 });
$('.moreInfo').hide();

CSS：

#Faqs{
    width:624px;
    margin:16px 0 0 0;
}

#Faqs.Wide{
    width:940px;
    margin:16px 0 0 0;
}

#faqsHeader{
    background:url(../../../images/digits/faqs_header_bg.png) no-repeat;
    height:25px;
    width:624px;
}

#faqsHeader.Wide{
    background:url(../../../images/digits/faqs_header_wide_bg.png) no-repeat;
    height:25px;
    width:940px;
}

#faqsContentWrapper{
    float:left;

    background:url(../../../images/digits/faqs_content_bg_slice.png) repeat-y;
    width:624px;
}

#faqsContentWrapper.Wide{
    float:left;

    background:url(../../../images/digits/faqs_content_bg_wide_slice.png) repeat-y;
    width:940px;
}

#faqsContent{
    background:url(../../../images/digits/faqs_content_bg.png) no-repeat;
    min-height:369px;
    width:620px;
    padding-left:20px
}

#faqsContent.Wide{
    background:url(../../../images/digits/faqs_content_bg_wide.png) no-repeat;
    min-height:369px;
    width:940px;
}

#faqsFooter{
    float:left;

    background:url(../../../images/digits/faqs_footer_bg.png) no-repeat;
    height:20px;
    width:624px;
}

#faqsFooter.Wide{
    float:left;

    background:url(../../../images/digits/faqs_footer_wide_bg.png) no-repeat;
    height:20px;
    width:940px;
}

#faqsContent.Wide .faqCategories{
    float:left;

    background:url(../../../images/digits/faqs_categories_bg.png) no-repeat;
    width:926px;
    height:167px;
    margin:10px 0 15px 5px;
}

#faqsContent.Wide .faqCategories h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:1em;
    color:#666;
    text-shadow:none;
    font-weight:bold;
    margin:10px 35px 1px 35px;
    padding:0 0 5px 0;
    border-bottom:1px solid #666;
}

#faqsContent.Wide .faqCategories ul{
    height:115px;
    width:870px;
}

#faqsContent.Wide .faqCategories ul li{
    float:left;

    width:250px;
    padding:0 10px 0 0;
}

#faqsContent.Wide .faqCategories ul li a{
    float:left;

    font-family:Arial, Helvetica, sans-serif;
    font-size:.75em;
    color:#666;
    text-shadow:none;
    margin:0 0 1px 5px;
    height:18px;
    width:250px;
    padding:2px 0px 0px 5px;
}

#faqsContent.Wide .faqCategories ul li a:hover{
    background:url(../../../images/digits/faqs_categories_hover.png) no-repeat;
    height:18px;
    width:250px;
    color:#FFF;
}

#faqsContent p{
    width:580px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.85em;
    color:#fff;
    padding: 10px 20px 10px 20px;

}

#faqsContent ul{
    width:580px;
    padding:10px 20px 10px 0;
    margin:0 0 0 20px;
}

#faqsContent a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:.85em;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    text-shadow: 1px 1px 1px #333;
}

#faqsContent a img{
    float:left;
    margin:6px 10px 0px 0px;
}

#faqsContent a:hover{
    text-decoration:none;
}

.moreInfo{
    display:inline-block;
/*  float:left;*/
    margin:0 0 0 1px;
    background:#fff;
    border-top:1px solid #F90;
    border-bottom:1px solid #FC6;
    width:618px;
    margin-left:-19px;
    zoom: 1;
}

.moreInfoWide{
    float:left;
    margin:0 0 0 -19px;
    background:#fff;
    border-top:1px solid #F90;
    border-bottom:1px solid #FC6;
    width:934px;
}

#faqsContent .moreInfo p{
    float:left;
    border-top:1px solid #CCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.75em;
    width:568px;
    color:#666;
    padding:5px 25px 10px 25px;
}

#faqsContent.Wide .moreInfoWide p{
    float:left;

    border-top:1px solid #CCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.75em;
    width:834px;
    color:#666;
    padding:5px 50px 10px 50px;
}

#faqsContent .moreInfo ul{
    float:left;

    background:#999;
    margin:0;
    padding-left:42px;
    width:576px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}
#faqsContent .dateAdded {
    float:left;

    background:#999;
    margin:0 0 0 0px;
    padding:10px 0 10px 23px;
    width:595px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;       
}
#faqsContent.Wide .moreInfoWide ul{
    float:left;

    background:#999;
    margin:0 0 0 0px;
    padding-left:40px;
    width:874px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
}

#faqsContent ul .moreInfo ul li, #faqsContent .dateAdded,
#faqsContent.Wide ul .moreInfoWide ul li{
    float:left;

    font-family:Arial, Helvetica, sans-serif;
    color:#FFF;
    margin-right:20px;
    font-weight:bold;
    font-size:.688em;
}


#faqsContent ul .moreInfo ul li a,
#faqsContent.Wide ul .moreInfoWide ul li a{
    text-shadow:none;
    color:#FC3;
}

#faqsContent ul .moreInfo ul li a:hover,
#faqsContent.Wide ul .moreInfoWide ul li a:hover{
    text-decoration:none;
    color:#fff;
}

Answer 1

似乎由于“损坏的 HTML”，即您不应该将 div 作为 ul 的子级，IE7 正在处理 moreInfo div 作为 a 元素的同级元素，它不会关闭 li 元素，您可能认为

这个 jQuery 似乎可以工作：

$(document).ready(function() {

    $('.moreInfo').hide();  

    $('.faqTitle').click(function() {
        $('.moreInfo').slideUp('normal');   

     // if the moreInfo div is a sibling of the li
        if($(this).next().is(':hidden') == true) {
          $(this).next().slideDown('normal');       
        }

     // but IE likes this one
        if($(this).find('a').next().is(':hidden') == true) {
          $(this).find('a').next().slideDown('normal');
        }   
    });

});

Answer 2

据我所知，您正在尝试制作一个简单的点击显示常见问题解答，从您所拥有的内容来看，它似乎太复杂了，为什么不尝试这样的事情呢？ http://jsfiddle.net/andresilich/AeGSQ/ [我一时兴起聚在一起的东西，你可以按照你认为合适的方式来调味，如果这是你正在寻找的，我无法正确理解这个问题。]