jQuery SlideDown в IE8 не нажимает следующий элемент

Question

имеет div, а за ним - ul.

применяет slideDown к div, и что толкает ul вниз хорошо во всех браузерах, кроме IE8, где div охватывает ul.

Когда я применяю slideUp к DIV, затем на ul скользит вниз - оставляя большой зазор между ним и бывшим элементом.

Кто-нибудь сталкивался с этим поведением? Что может быть причиной?

Вы можете увидеть пример here:

slideDown и slideUp активируются при нажатии на эту фотографию:

Он делает это Див появляются или исчезают:

И это 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

В итоге я переписал HTML-код, поэтому div с классом = "list" был за пределами li с идентификаторами «когда» и «где». Я, конечно, тоже изменил JavaScript, чтобы учесть это изменение, и это решило проблему.

Answer 2

у меня была аналогичная проблема, и проблема, как представляется, связано с использованием закругленными уголками

behavior: url(border-radius.htc); 

Моя дикая догадка заключается в том, что любая директива поведения CSS может вызвать проблемы.