JQuery Accordion: проблемы с анимацией IE - PullRequest
Новая
       103

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

17 голосов
/ 02 декабря 2008

Обновление

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

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

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

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

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

Ответы [ 16 ]

21 голосов
/ 28 января 2009

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

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

Рассмотрите возможность добавления: 

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

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

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

6 голосов
/ 27 февраля 2011

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

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}
5 голосов
/ 02 декабря 2008

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

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

для вашего примера вы бы использовали его так: 

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

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

РЕДАКТИРОВАТЬ: Пример кода с функцией обратного вызова 

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 */ });        
});
2 голосов
/ 02 июня 2009

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
2 голосов
/ 02 февраля 2009

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

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

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

1 голос
/ 14 февраля 2011

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

1 голос
/ 03 апреля 2010

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

<!DOCTYPE html>

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

1 голос
/ 02 февраля 2009

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

0 голосов
/ 28 июня 2010

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

0 голосов
/ 10 февраля 2010

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

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

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

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

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

Страница:
...