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

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="#" onclick="location.href='http://example.com'; return false;">Example Link</a></li>
      <li><a href="#" onclick="location.href='http://example.com'; return false;">Example Link</a></li>
   </ul>

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

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

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

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

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

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

Ответы

Ответ 1

Я чувствую твою боль! Недавно я прошел через нелепый поиск неисправностей, где я вырвал все из основной страницы и блока макета страницы за кадром (это было на самом деле в 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. я написал сообщение, в котором содержится немного больше информации об устранении неполадок.

Ответ 2

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

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}

Ответ 3

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

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 */ });        
});

Ответ 4

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

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

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

Ответ 5

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Ответ 6

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

Ответ 7

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

<!DOCTYPE html>

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

Ответ 8

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

Ответ 9

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

 navigation: true

Ответ 10

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

Ответ 11

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

Ответ 12

Я экспериментировал с той же проблемой, и через некоторое время я обнаружил, что если у вас есть элемент, содержащийся внутри вашего основного 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. Надеюсь, что это будет полезно.

Ответ 13

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

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

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

Ответ 14

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

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

Ответ 15

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

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

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

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

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

Ответ 16

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