1

有一个div, 后面是一个ul.

我适用slideDown于div, 并且在所有浏览器中都很好地推动了ul除 IE8 之外的所有浏览器，其中div覆盖了ul.

当我应用slideUp到 div 时，它会ul向下滑动 - 在它和前一个元素之间留下很大的间隙。

有没有人遇到过这种行为？可能是什么原因造成的？

你可以在这里看到一个例子：

单击此图像时会激活 和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*/
                    }); 
                });

（前段时间我问了一个关于相同代码的问题（并得到了一个很好的答案），但问题出在 Chrome 中，问题行为不同）

4

2 回答 2

1

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

behavior: url(border-radius.htc);

我的疯狂猜测是任何 CSS 的行为指令都会引起麻烦。

于 2012-06-01T22:19:00.743 回答
0

我最终重新编写了 HTML，因此divwith class="list" 位于liid 的“何时”和“哪里”之外。我当然也修改了 JavaScript，以适应这种变化，这就解决了问题

于 2012-08-26T06:28:57.380 回答