IE8中的jQuery SlideDown不会压低下一个元素

Question

有一个div，其后面是ul。

我将slideDown应用于div，并且除了在IE8中ul涵盖div之外的所有浏览器中都会很好地推送ul

当我将slideUp应用于div时，然后 ul向下滑动 - 在它与前一个元素之间留下很大的差距。

有没有人遇到这种行为？可能导致什么呢？

您可以看到示例here：

单击此图片时会激活slideDown和slideUp：

它使这个div出现或消失：

这是ul，当该div出现和消失时，它应该分别向上和向下：

这是代码。 HTML：

<div class="clearfix" id="whatWhere">
<ul>
<!--what-->
    <li id="what">
        <span>מה</span>
         <div class="list">
            <ul class="">
              <li class="orange"><a href="http://dev.linux.ort.org.il/colleges?cat=7">אדריכלות ועיצוב פנים</a></li>
              <li class="gray"><a href="http://dev.linux.ort.org.il/colleges?cat=14">אלקטרוניקה</a></li>
              </ul>    
             <div class="toClose">
             <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png">
             </div>
            </div><!--end list-->
    </li>
 <!-- where -->
    <li id="where">
            <span>איפה</span>
            <div class="list">
            <ul class="">
                <li class="orange"><a href="http://dev.linux.ort.org.il/colleges/?p=21">מכללת אורט כפר סבא</a></li>
                <li class="gray"><a href="http://dev.linux.ort.org.il/colleges/?p=19">מכללת אורט קרית ביאליק</a></li>
            </ul>

                 <div class="toClose">
             <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png">
             </div>
                </div><!--end list-->
     </li>
   </ul>
</div>

<ul id="links">
   <li id="hashlama"><a href="http://dev.linux.ort.org.il/colleges/?p=161">השלמה לתואר ראשון להנדסאים</a></li>
   <li id="michlalot"><a href="http://dev.linux.ort.org.il/colleges/?p=165">מכללות אקדמיות להנדסה</a></li>
</ul>

这是JavaScript：

                  $(document).ready(function() {  
                  $("#whatWhere ul li  span").click(function () {
                      //if another li open- closed;
                    if($(this).parent().siblings().children(".list").hasClass("highlight")){
                        // $(this).parent().siblings().children("ul").slideUp("slow"); 
                        $(this).parent().siblings().children(".list").css("display","none"); 
                         $(this).parent().siblings().removeClass("open");
                         $(this).parent().siblings().addClass("standBy");
                         $(this).parent().siblings().children(".list").toggleClass("highlight");   
                    } 
                    //open ul of selected li area
                    $(this).next().toggleClass("highlight");   
                    if($(this).next().hasClass("highlight"))
                        {
                        //#whatWhere
                            $(this).parent().parent().parent().addClass("open");
                            //li
                             $(this).parent().addClass("open");
                             $(this).next().slideDown("slow");
                             $(this).parent().siblings().addClass("standBy");
                             $(this).parent().removeClass("standBy");
                        }
                    else
                        {
                         $(this).parent().parent().parent().removeClass("open");
                         //li
                             $(this).parent().removeClass("open");
                         $(this).next().slideUp("slow"); 
                        // $(this).next().css("display","none"); 
                         $(this).parent().siblings().removeClass("standBy");
                         $(this).parent().removeClass("standBy");
                        }
                    }); 

                    $("#whatWhere ul li  .list  div.toClose").click(function () {
                         $(this).parent().parent().parent().parent().removeClass("open"); /*div #whatWhere*/
                             $(this).parent().parent().removeClass("open"); /*li #what/#where*/
                         $(this).parent().slideUp("slow"); 

                         $(this).parent().parent().siblings().removeClass("standBy");/* the other li #what/#where*/
                          $(this).parent().toggleClass("highlight");   /* div .list - maybe not needed*/
                    }); 
                });

（我前一段时间问question about the same code（得到了一个很好的答案），但问题出现在Chrome中，问题行为不同了）

Answer 1

我有一个类似的问题，问题似乎与使用圆角

有关

behavior: url(border-radius.htc);

我的猜测是，任何CSS的行为指令都会造成麻烦。

Answer 2

我最终重写了HTML，因此带有class =“list”的div位于li之外，ID为“when”和“where”。我当然也改变了JavaScript，以适应这种变化，并解决了这个问题