jquery - jQueryIE7のslideDownの問題

Question

私はこれを機能させるためにいつもの容疑者を試しました。ズーム：1、最小高さなどは役に立ちません。誰かアイデアはありますか？（はい、pタグのスパンの下のマークアップはがらくたです。これはリモートフィードであり、変更できません。）

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;
}

score 1 · Accepted Answer

私が収集できることから、あなたは簡単なクリックして表示するFAQを作成しようとしています。あなたが持っているものを見ると、複雑すぎるようです。このようなものを試してみませんか？http://jsfiddle.net/andresilich/AeGSQ/ [私が気まぐれで集めたもの、あなたが探しているものであるならば、あなたはそれをあなたが探しているものであると思うようにスパイスを加えることができます、私は質問を正しく理解できません。 ]

score 1 · Accepted Answer

「壊れたHTML」のために、つまりIE7divの子が要素の兄弟として扱われているので、要素を閉じていないように思われるかもしれません。ulmoreInfo divali

この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');
        }   
    });

});

jquery - jQueryIE7のslideDownの問題

2 に答える 2

Related

Reference