jQuery Accordion: проблемы с анимацией IE

17

Update

Я делаю это сообщество wiki по трем причинам:

  • Я не чувствую, что получил окончательный ответ, но
  • Я давно не нуждаюсь в ответе, потому что я перевернул свою собственную функцию аккордеона
  • Этот вопрос получает тонны просмотров, поэтому ясно, что многие люди по-прежнему заинтересованы.

Итак, если кто-то хочет изменить / уточнить этот вопрос и сделать его окончательным руководством, будь моим гостем.

Я работаю над страницей, используя jQuery элемент интерфейса аккордеона . Я смоделировал свой HTML на этом примере, за исключением того, что внутри элементов <li> у меня есть некоторые неупорядоченные списки ссылок. Вот так:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

Проблема: IE Анимация воняет

Несмотря на то, что IE7 прекрасно обновляет меню аккордеона в документации, он имеет проблемы с моим. В частности, одно меню аккордеона на странице движется рывком и имеет вспышки содержимого. Я знаю, что это не проблема с CSS, потому что то же самое происходит, если я не включаю файлы CSS.

В другом меню аккордеона на странице откроется первый раздел, который вы нажмете, и после этого не откроется ни один из них.

Обе эти проблемы специфичны для IE, и оба исчезают, если я использую параметр animated: false . Но я хочу сохранить анимацию slide по умолчанию, так как она помогает пользователю понять, что делает меню.

Есть ли другой способ?

    
задан Nathan Long 11.09.2009 в 23:58
источник

16 ответов

21

Я чувствую твою боль! Недавно я прошел через нелепый поиск неисправностей, где я вырвал все из основной страницы и блока макета страницы за кадром (это было на самом деле в SharePoint), постоянно похудая на странице.

Конечный результат оказался не имеющим тип документа для html-документа (какой-то разработчик удалил его). Отсутствие doctype означало, что IE 7 работает в режиме quirks, а встроенный CSS, выпущенный JQuery Accordion, ведет себя фанки.

Рассмотрим добавление:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

В верхней части вашей главной страницы или html-документа (если еще не определен тип doctype).

На самом деле есть целый сайт, посвященный поведению Quirks Mode. Вы можете проверить статью о режиме Quirks здесь . Я написал сообщение , в котором содержится немного больше информации об устранении неполадок.

    
ответ дан Tyler 28.01.2009 в 04:01
источник
6

Такая же проблема, как и все в IE7 с хорошо сформированной стандартной разметкой HTML. Что в конечном итоге работало, было удаление autoHeight: "false" и использование clearStyle: "true" .
Я также создал IE & lt; 8 версия аккордеона Инициализация с помощью:

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}
    
ответ дан IanI 27.10.2011 в 14:36
источник
5

Я фактически избегал использования плагина аккордеона, поскольку я нашел его немного негибким для моих нужд. Я обнаружил, что самый простой и гибкий аккордеон так же прост, как:

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

для вашего примера вы бы использовали его следующим образом:

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"));        
});

вы можете использовать это как шаблон и строить в добавлении класса css, обратные вызовы и другие полезные вещи, но я обнаружил, что в конце было намного проще сделать это так, как обмануть плагин аккордеона.

EDIT: Пример кода с функцией обратного вызова

var accordion = function(toggleEl, accEl, callback) {
    toggleEl.click(function() {
        accEl.slideToggle(callback);
        return false;
    });
}

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });        
});
    
ответ дан Darko Z 02.12.2008 в 02:10
источник
2

Ran в эту же проблему, но это исправлено для IE 6 и 7:

$().ready(function(){
  $(".ui-accordion-header").click(function() {
    $(this).next().fadeIn();
  });
)};

Я думаю, что это делает скольжение в любом случае приятным ...

    
ответ дан Schulty 02.02.2009 в 18:18
источник
2

У меня есть аналогичная проблема, и я исправляю ее, добавляя этот тип документа. И он работает как в IE, так и в FF

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
    
ответ дан Ben 02.06.2009 в 03:50
источник
1

Измените теги привязки на теги SPAN. У меня была одна и та же проблема, и это сработало хорошо. То же самое касается тегов DIV, IE отключается, когда они находятся на аккордеоне по какой-то причине. Позиция: Absolute может также вызывать IE, fyi

    
ответ дан Josh 01.02.2009 в 23:11
источник
1

Я использую JQuery 1.4 и нашел

<!DOCTYPE html>

подходит для IE6, Chrome тоже.

    
ответ дан andy 03.04.2010 в 09:33
источник
1

Я действительно нашел противоположность sebastien - у меня были минимальные высоты на внутреннем содержимом DIVs, которые вызывали отрывистую анимацию. Я снял их, и все улучшилось. Но я не уверен, как это взаимодействует с autoheight - согласно синтаксису, мой установлен на «false», но мой аккордеон определенно, кажется, игнорирует это ...

    
ответ дан chrisyakimov 14.02.2011 в 19:21
источник
0

В настройках, которые вы должны установить:

 navigation: true
    
ответ дан Pim Jager 01.12.2008 в 23:38
источник
0

Просто измените «autoHeight: false» на «autoHeight: true».

    
ответ дан Partha Bhattacharya 29.03.2009 в 10:36
источник
0

Имея похожие проблемы, я замечаю, что некоторые люди предлагают посмотреть на доктрины. Я просто попытался просмотреть фактический сайт пользовательского интерфейса jQuery и их демонстрационную аккордеонную работу просто отлично в ie6, предложив проблему с моим кодом (более детективная работа для меня). Но я также замечаю, что сайт jquery.UI doctype - это просто <!DOCTYPE html>

    
ответ дан nedlud 24.07.2009 в 08:43
источник
0

Я экспериментировал с той же проблемой, и через некоторое время я обнаружил, что если у вас есть элемент, содержащийся внутри вашего основного div с относительным позиционированием, это заставит IE открыть аккордеон «отрывистый». Вот что я делаю ...

<div id="accordion">

  <h3 class="oneLine">Asylum</h3>

  <div class="serviceBlockContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue a enim convallis facilisis. Aenean eu ullamcorper nulla. Ut id urna quis augue bibendum commodo et a quam.</p>
  </div>

</div>

У меня была позиция элемента H3, установленная относительно, и это заставило ее сломаться в IE. Надеюсь, что это будет полезно.

    
ответ дан user198538 29.10.2009 в 01:07
источник
0

У меня возникла проблема, когда div ниже моего заголовка на аккордеоне, который имел белый фон на фоне синей страницы, исчез в фоновом цвете. Иногда, когда он зависает над другим элементом заголовка, он будет отображаться; иногда при подсветке текста он снова появлялся. Это было очень странно и ТОЛЬКО ПРОИЗОШЛО В IE7.

Применение масштабирования: 1; таргетинг только на IE7 на div-файле u-content фиксировал это.

Я надеюсь, что это поможет кому-то, потому что я просто потратил несколько часов, пытаясь отследить это.

    
ответ дан Joe Sepi 17.12.2009 в 22:47
источник
0

Попробуйте использовать это:

{active: "a.default", alwaysOpen: "true", autoHeight: "false"}

вместо этого:

{active: "a.default", alwaysOpen: true, autoHeight: false}

У Explorer проблемы с таким синтаксисом.

    
ответ дан Menachem Almog 10.02.2010 в 20:52
источник
0

У меня была аналогичная проблема с аккордеоном в IE6 и IE7, где я не использовал структуру HTML по умолчанию для аккордеона. Как ни странно, фиксирование горизонтального размера элементов аккордеона на определенное количество пикселей устраняло проблемы с аккордеонной анимацией. Зачем? Я не знаю. Но я заметил, что проблемы были специфическими для использования autoHeight: true и проблемы, возникшие в конце анимации, где я предполагаю, что высота элементов аккордеона сбрасывается. И мы все знаем, что IE не может выполнять математику.

    
ответ дан Aaron 28.06.2010 в 21:35
источник
0

Просто измените autoHeight: false на autoHeight: true - & gt; это работало для меня, но не было того, чего я хочу ...

Найдите, что проблема min-height для IE7 решила проблему.

    
ответ дан sebastien 29.12.2011 в 10:54
источник