Question

我是一名菜鸟设计师，在此页面上遇到了一些麻烦：http://www.resolvegroup.co.nz/javasurvey.php

扩展问题的javascript操作存在问题。对于Internet Explorer（版本7），扩展后的第一个问题部分隐藏在问题2下。这在不同程度上发生了所有问题，有时使下一个问题完全隐藏和其他问题。

Firefox（版本3.03）没有上述问题，但您无法访问解释或选择IE7中的下一个问题。

有谁知道这是怎么回事，以及如何解决？

Answer 1

我建议使用预先构建的Accordion脚本，就像jQuery UI库中内置的那样：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无法很好地处理流出定位。结果，它变得混乱并试图将这些元素放置在奇怪的地方。

构建没有相对或绝对定位的手风琴，它应该可以正常工作。

展开和折叠问题

2 个答案: