Question

我已经创建了手风琴控制器，并且在手风琴控制器中它有2个单选按钮和按钮。我在HTML5中使用javascrip和dot net中的css创建。当任何单选按钮在同一个手风琴面板中检查时，其他一些控制面板应该当打开另一个单选按钮时，第一个单选按钮面板应该被禁用，另一个面板应该在同一个手风琴控件中看到

Answer 1

这可以通过:checked伪选择器单独使用CSS来完成。

示例：

input[type="radio"] + div {
    height: 0;
}

input[type="radio"]:checked + div {
    height: 100px;
}

jsFiddle（完成转换）：http://jsfiddle.net/dH65w/

不幸的是，转换无法正常使用height: auto，因此您需要固定的高度。此外，CSS的“+”部分在IE7中不起作用，转换甚至不能在IE9中工作。

Answer 2

这是一个与我的其他答案基本相同的jQuery版本（更多浏览器兼容，但它是JavaScript）。

$('input[type="radio"]').change(function() {
    $('input[type="radio"]:checked + div').animate({
        height: "100px"
    }, ".25s");
    $('input[type="radio"]:not(:checked) + div').animate({
        height: 0
    }, ".25s");
});

jsFiddle：http://jsfiddle.net/dH65w/1/

jQuery方式更灵活，因为你可以做一些CSS规则不允许的事情（例如影响父元素之外的元素），就像在这个jsFiddle：http://jsfiddle.net/dH65w/2/

使用嵌套项目进行手风琴控制

2 个答案: