2012-04-03 17 views
1

Ich habe eine div, und folgende ist eine ul.jQuery SlideUp funktioniert nicht gut in Chrome

Ich wenden slideDown auf die div, und das schiebt die ul freundlich in allen Browsern.

Allerdings, wenn ich slideUp zum div, in allen broswers gelten die ul aufkommt schön nach die div beendet hat Schiebetüren, aber in Chrome, die ul kommt während die div oben gleitet, und dann sieht es für ein paar Sekunden chaotisch aus, bis die div verschwindet.

können Sie ein Beispiel sehen here:

Die slideDown und slideUp aktiviert werden, wenn Sie das Bild klicken: enter image description here

Es macht dieses DIV erscheinen oder verschwinden: enter image description here

Und das ist die ul, die nach unten und oben gehen soll, wenn das div erscheint bzw. verschwindet: enter image description here

Und hier ist der Code. Der HTML-Code:

<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> 

Und das ist das 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*/ 
        }); 
       }); 
+0

schreiben Sie immer den entsprechenden Markup und Code ** in der Frage selbst **, nicht nur Link (* auch * Verknüpfung ist in Ordnung). Warum: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-for-similar-for-putting-code-in-the-question –

+0

@ T.J. Crowder Du hast Recht, und das tue ich normalerweise, aber dieses Mal war der Code so lang (sowohl HTML als auch JS), dass ich befürchtete, dass es eher verwirren als helfen würde ... –

+1

@ Lea: Noch besser, es einzuschließen . Stellen Sie einfach sicher, dass Ihre aktuelle Frage ganz oben steht, fügen Sie dann den Code und das Markup unten ein. Wie es jetzt ist, ist diese Frage für jemanden mit einem ähnlichen Problem in der Zukunft nutzlos. –

Antwort

3

Fügen Sie "height: auto" zu Ihrem div mit der ID "whatWhere" dauerhaft hinzu und es sollte funktionieren.

+0

Vielen Dank @helmus, Das hat das Problem gelöst! Können Sie erklären, wie Sie zu dieser Lösung gekommen sind? –

+1

Ich bin froh, dass ich Lea helfen konnte! Ich habe Chrome-Dev-Tools verwendet, um die Änderungen während der Animation zu überwachen. Ich habe dann bemerkt, dass die "offene" css-Klasse in "style.css" entfernt wird, kurz bevor das div kollabiert, diese Klasse hat "height: auto" als eine der style -Eigenschaften und ändert die whatWhere-Klasse, um sie anzupassen, behob das Problem . –

+0

Danke @helmus! –

1

This Kerl scheint gekommen zu sein es in Chrome läuft.

+0

Danke, aber das war in meinem Fall nicht hilfreich, da das Element, auf das angewendet wurde, bereits ein div –

+0

war, aber das Scrollen funktioniert auch richtig :-) – santa

+0

Ich reparierte jetzt, nach @ helmus Antwort –

0

Sie sollten die Anzeige der ul in den Rückruf der zeigt die div.

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

Danke, aber ich würde lieber nicht JS verwenden, um zu beheben, was wirklich ein CSS-Problem zu sein scheint –

+0

Das ist ein fairer Punkt – fragmentedreality

Verwandte Themen