jQuery SlideUp在Chrome中无法正常工作

Question

我有一个div，然后是ul。

我将slideDown应用于div，并且在所有浏览器中都很好地将ul向下推。

然而，当我申请slideUp到div，在所有broswers的ul很好 的div已经完成向上滑动后出现，但在Chrome中，ul出现而的div是向上滑动，然后看起来很混乱几秒钟，直到div消失。

你可以看到一个例子here：

的slideDown和slideUp被激活，当您点击此图片：

它使这个div出现或消失：

这是ul，当div出现并消失时，应该是down and up，分别为：

这里是代码。该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*/ 
        }); 
       }); 

Answer 1

将“height：auto”添加到ID为“whatWhere”的div中并且它应该可以正常工作。

Answer 2

This家伙似乎已完成了在Chrome中运行。

Answer 3

您应该在显示div的回调中添加显示ul。

$('#yourDiv').slideUp(normal, function() { 
    $('#yourUl').slideDown(); 
});