Развернуть и свернуть вопросы

Question

Я начинающий дизайнер, у которого есть несколько проблем с этой страницей: http://www.resolvegroup.co.nz/javasurvey.php

Есть проблемы с работой javascript расширенных вопросов. Для Internet Explorer (версия 7) первый вопрос при раскрытии частично скрыт под вопросом 2. Это происходит в разной степени со всеми вопросами, время от времени делая следующий вопрос полностью скрытым и другие проблемы.

Firefox (версия 3.03) не имеет проблемы, как указано выше, но вы не можете получить доступ к объяснениям или выбрать следующий вопрос, как в IE7.

Кто-нибудь знает, что с этим происходит и как это исправить?

Answer 1

Я бы порекомендовал посмотреть на использование готового скрипта Accordion, например, встроенного в библиотеку пользовательского интерфейса jQuery: http://docs.jquery.com/UI/Accordion

---

Кроме того, я могу предложить несколько вещей. Ваш код:

$(".score-list").slideUp(speed);
$(".score-list").removeClass("open");
$("a.open-answer").removeClass("hidden");
$(this).parent().children(".score-list").slideDown(speed);
$(this).parent().children(".score-list").toggleClass("open");
$(this).toggleClass("hidden");

можно сделать намного эффективнее, сохранив результаты запроса jQuery, а также воспользовавшись возможностями цепочки jQuery: довольно много функций jQuery возвращают сам объект jQuery, что означает, что вы можете вызывать несколько функций подряд без необходимости ссылаться на объект снова и снова. Вот что я имею в виду:

$(".score-list")        // my own preference is to split the calls onto
    .slideUp(speed)     // multiple lines to make it easier to read.
    .removeClass("open")
;
$("a.open-answer").removeClass("hidden");

var $this = $(this);    // store the result from a query in an object so you
                        // don't have to go through that again.
$this
    .parent()
    .children(".score-list")
    .slideDown(speed);
    .toggleClass("open")
;
$this.toggleClass("hidden");

Answer 2

Если я не ошибаюсь, у вашего CSS есть некоторая неожиданность. «.question-container h3» и «.question-container h3 span» имеют относительное и абсолютное позиционирование соответственно. Internet Explorer не очень хорошо справляется с позиционированием вне потока. В результате он запутывается и пытается поместить эти элементы в странные места.

Создайте гармошку без относительного или абсолютного позиционирования, и она должна работать нормально.