展开和折叠问题

Expand and collapse issues

本文关键字：问题 折叠      更新时间：2023-09-26

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

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

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

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

我建议您考虑使用预构建的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");

如果我没有记错的话，你的CSS有一些不稳定的地方。".h3问题容器"answers".h3-span问题容器"分别具有相对定位和绝对定位。Internet Explorer不能很好地处理流外定位。结果，它会感到困惑，并试图将这些元素放置在奇怪的地方。

在没有相对或绝对定位的情况下构造手风琴，它应该可以很好地工作。

相关文章：