JQuery Accordion: проблемы с анимацией IE
Обновлять
Я делаю эту вики-страницу сообщества по трем причинам:
- Не думаю, что получил однозначный ответ, но
- Давно уже перестал нуждаться в ответе, потому что накатил собственную функцию аккордеона
- этот вопрос набирает массу просмотров, поэтому очевидно, что многие люди по-прежнему заинтересованы
Так что, если кто-то хочет изменить / прояснить этот вопрос и сделать его исчерпывающим руководством, будь моим гостем.
Я работаю над страницей, используя 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 Animation воняет
Хотя IE7 прекрасно анимирует примерное меню аккордеона из документации, у него есть проблемы с моим. В частности, одно аккордеонное меню на странице движется рывками и имеет мигание содержимого. Я знаю, что это не проблема CSS, потому что то же самое происходит, если я не включаю свои файлы CSS.
Другое меню аккордеона на странице открывает первый раздел, который вы щелкнули, и после этого не открывает ни один из них.
Обе эти проблемы специфичны для IE, и обе исчезнут, если я использую опцию animated: false. Но я бы хотел сохранить анимацию slide по умолчанию, поскольку она помогает пользователю понять, что делает меню.
Есть другой способ?
Ответы 16
В опциях вы должны установить:
navigation: true
На самом деле я избегал использования подключаемого модуля аккордеона, поскольку обнаружил, что он немного негибкий для моих нужд. Я обнаружил, что самый простой и гибкий аккордеон очень прост:
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 */ });
});
В этом вся прелесть jQuery! Удачи
Что ж, будущее здесь. Я хотел добавить к моим заголовкам знак плюса / минуса, чтобы указать их состояние, поэтому заголовки должны быть тегами <p>. В итоге это оказалось не слишком сложно. Спасибо за предложение. :)
Я чувствую твою боль! Недавно я прошел через нелепую процедуру устранения неполадок, при которой я вырывал все из главной страницы и макета страницы блок за блоком (на самом деле это было в 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-документа (если тип документа еще не определен).
На самом деле есть целый сайт, посвященный поведению Quirks Mode. Вы можете прочитать статью о Quirks Mode здесь. Я написал сообщение, в котором есть немного дополнительной информации по устранению неполадок.
Старый пост, но это помогло мне избавиться от некоторых проблем. Мой аккордеон был дерганым, а документ имел тип документа, но я уже довольно давно использую тип документа HTML5 - он не запускает режим причуд, но здесь возникает проблема. Переход на более старый доктайп меня сразу поправил.
У меня было много сбоев и случайных вспышек контента даже при использовании библиотеки jquery в IE. Использование первого тега DTD отлично сработало. Он фактически решил несколько других неприятных проблем с пользовательским интерфейсом на странице, над которой я работал. Это объяснение режима причуд и строгого режима отвечает на множество вопросов. Отличный пост.
Измените теги привязки на теги SPAN. У меня была та же проблема, и это хорошо сработало. То же самое и с тегами DIV, IE отключается, когда они по какой-то причине находятся в аккордеоне. Позиция: Абсолют может также напугать IE, уфу
Возникла та же проблема, но это исправило ее для IE 6 и 7:
$().ready(function(){
$(".ui-accordion-header").click(function() {
$(this).next().fadeIn();
});
)};
Думаю, в любом случае это делает скольжение красивее ...
Просто измените autoHeight: false на autoHeight: true.
Я думаю, что autoheight должен быть false, чтобы css работал правильно в IE6
У меня похожая проблема, и я исправляю ее, добавляя этот тип документа. И он работает как в IE, так и в FF
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
Возникли похожие проблемы, и я заметил, что несколько человек предлагают посмотреть на doctypes.
Я просто попытался просмотреть фактический сайт jQuery UI, и их демонстрационный аккордеон отлично работает в ie6, предполагая, что это является проблема с моим кодом (для меня больше детективной работы). Но я также заметил, что тип документа сайтов jquery.UI - это просто <!DOCTYPE html>
о, я должен добавить, что у меня такая же проблема в IE8 в режиме совместимости. Отключите совместимость и все в порядке
Я экспериментировал с той же проблемой, и через некоторое время я обнаружил, что если у вас есть элемент, содержащийся внутри вашего основного 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. Надеюсь, это будет полезно.
У меня была проблема, когда у div под моим заголовком в аккордеоне, который имел белый фон на синем фоне страницы, исчезал цвет фона. Иногда при наведении курсора на другой элемент заголовка он появлялся; иногда при выделении текста он тоже появлялся снова. Это было очень странно и ПРОИСХОДИТ ТОЛЬКО В IE7.
Применение увеличения: 1; таргетинг только на IE7 на div ui-content исправил это.
Я надеюсь, что это кому-то поможет, потому что я потратил несколько часов, пытаясь отследить это.
Просто замените autoHeight: false на autoHeight: true -> у меня это сработало, но не то, что я хочу ...
Выяснилось, что установка min-height для IE7 решила проблему.
Попробуйте использовать это:
{active: "a.default", alwaysOpen: "true", autoHeight: "false"}
вместо этого:
{active: "a.default", alwaysOpen: true, autoHeight: false}
В проводнике есть проблемы с таким синтаксисом.
Я использую JQuery 1.4 и обнаружил
<!DOCTYPE html>
подходит для IE6, Chrome тоже.
У меня была аналогичная проблема с аккордеоном в IE6 и IE7, где я не использовал структуру HTML по умолчанию для аккордеона. Как ни странно, установка горизонтального размера элементов аккордеона на определенное количество пикселей устранила проблемы с анимацией аккордеона. Почему? Я не знаю. Но я заметил, что проблемы были специфичны для использования autoHeight: true, а проблемы возникли в конце анимации, где я предполагаю, что высота элементов аккордеона сброшена. И все мы знаем, что IE не умеет делать математику.
На самом деле я нашел противоположность Себастьяну - у меня были минимальные высоты для DIV внутреннего содержимого, которые вызывали рывки в анимации. Я снял их, и дела пошли на поправку. Но я не уверен, как это взаимодействует с autoheight - согласно синтаксису у меня установлено значение «false», но мой аккордеон определенно игнорирует это ...
Та же проблема, что и в IE7, с хорошо сформированной стандартной разметкой HTML. В конечном итоге сработало удаление autoHeight: "false" и использование clearStyle: "true".
.
Я также создал версию инициализации аккордеона для IE <8 с помощью:
if ( $.browser.msie && $.browser.version < 8 ) {
//ie<8 version
}
else {
//version for the good browsers
}
Я впечатлен тем, что вы можете создать свой собственный аккордеон, используя всего несколько строк кода. Я не решаюсь перекодировать то, что делаю сейчас, просто чтобы посмотреть, смогу ли я улучшить анимацию, но я могу попробовать это в будущем.