1

がありdiv、それに続くのはulです。

に適用slideDownするdivとul、divがul.

divに適用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 の "when" と "where" の外側にありました。もちろん、この変更に対応するためにJavaScriptも変更し、問題を解決しました

于 2012-08-26T06:28:57.380 に答える