jQuery SlideUp在Chrome中效果不佳 [英] jQuery SlideUp doesn't work well in Chrome

问题描述

我有一个 div ，然后是 ul 。

我将 slideDown 应用于 div ，并且在所有浏览器中将 ul 向下推送。然而，当我将 slideUp 应用于 div 时， ，在> div 之后的所有broswers ul 在Chrome中， ul 出现，而 div 滑动直到 div 消失。

你可以看到一个例子< a href =http://dev.linux.ort.org.il/colleges/ =nofollow noreferrer> here ：

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

这使得这个div出现或消失：

这就是 ul ，当div出现并消失时，它应该是down和up：

这里是代码。 HTML：

 < div class =clearfixid =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>< ; /立GT; 
< li class =grey>< a href =http://dev.linux.ort.org.il/colleges?cat=14>אלקטרוניקה< / a>< /李> 
< / ul> 
< div class =toClose> 
< img width =37height =18src =http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png > 
< / div> 
< / div><！ - 结束清单 - > 
< / li> 
<！ - 其中 - > 
< 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 class =grey>< a href =http://dev.linux.ort.org.il/colleges/?p=19>מכללתאורטקריתביאליק< / a> ;< /锂> 
< / ul> 
 
< div class =toClose> 
< img width =37height =18src =http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png > 
< / div> 
< / div><！ - 结束清单 - > 
< / li> 
< / ul> 
< / div> 
 
< ul id =links> 
< li id =hashlama>< a href =http://dev.linux.ort.org.il/colleges/?p=161>与您的朋友分享< / a> ;< /锂> 
< li id =michlalot>< a href =http://dev.linux.ort.org.il/colleges/?p=165>欢迎来到我们的网站< / a> < /锂> 
< / ul> 
  

这就是JavaScript：

<$ p $（$）{code> $（document）.ready（function（）{
$（＃whatWhere ul li span）。click（function（）{
// if another li如果（$（this）.parent（）。siblings（）。children（。list）。hasClass（highlight））{
// $（this）开放关闭;
。父母（）。兄弟姐妹（）。孩子（ul）。slideUp（slow）;
$（this）.parent（）。siblings（）。children（.list）。css（ （））;
$（this）.parent（）。siblings（）。removeClass（open）;
$（this）.parent（）。siblings（）。addClass （standBy）;
$（this）.parent（）。siblings（）。children（。list）。toggleClass（highlight）;
}
// open ul选定的li区
$（this）.next（）。toggleClass（highlight）;
if （$（this）.next（）。hasClass（highlight））
{
//＃whatWhere
$（this）.parent（）。parent（）。parent（） .addClass（ 打开）;
// li
$（this）.parent（）。addClass（open）;
$（this）.next（）。slideDown（slow）;
$（this）.parent（）。siblings（）。addClass（standBy）;
$（this）.parent（）。removeClass（standBy）;


{
$（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）;
$ b $（this）.parent（）。parent（）。siblings（）。removeClass（ ）; / *另一个li＃什么/＃哪里* /
$（this）.parent（）。toggleClass（highlight）; / * div .list - 可能不需要* /
}）;
}）;

解决方案

使用id添加height：auto whatWhere永久存在，它应该有效。

I have a div, and following it is a ul.

I apply slideDown to the div, and that pushes the ul down nicely, in all browsers.

However, when I apply slideUp to the div, in all broswers the ul comes up nicely after the div has finished sliding up, but in Chrome, the ul comes up while the div is sliding up, and then it looks messy for a few seconds until the div disappears.

You can see an example here:

The slideDown and slideUp are activated when you click this image:

It makes this div appear or disappear:

And this is the ul that is supposed to go down and up when that div appears and disappears, respectively:

And here is the code. The 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>

And this is the 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*/
                    }); 
                });

解决方案

Add "height: auto" to your div with id "whatWhere" permanently and it should work.

这篇关于jQuery SlideUp在Chrome中效果不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！