1
У меня есть div, а за ним стоит ul.jQuery SlideUp не работает в Chrome
Я применяю slideDown к div, и это толкает ul вниз красиво, во всех браузерах.
Однако, когда я применяю slideUp к div, во всех broswers ul приходит красиво после div закончил скольжение вверх, но в Chrome, то ul приходит в то время какdiv скользит вверх, а затем он выглядит грязным в течение нескольких секунд, пока не исчезнет div.
Вы можете увидеть пример here:
slideDown и slideUp активируются при нажатии на эту фотографию: 
Он делает это Див появляются или исчезают: 
И это 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*/
});
});
Всегда указывайте соответствующую разметку и код ** в самом вопросе **, не просто ссылку (* также * ссылка в порядке). Почему: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question –
@ T.J. Crowder. Вы правы, и я обычно делаю, но на этот раз код был настолько длинным (как HTML, так и JS), что я боялся, что это смутит, а не поможет ... –
@ Lea: Еще лучше включить его , Просто убедитесь, что ваш фактический вопрос находится наверху, затем вставьте код и разметку внизу. Как и сейчас, этот вопрос бесполезен для людей с аналогичной проблемой в будущем. –