javascript - 带有嵌套项的手风琴控制

Question

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

Answer 1

This can be done with CSS alone, via the :checked pseudo-selector.

Example:

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

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

jsFiddle (complete with transitions): http://jsfiddle.net/dH65w/

Unfortunately transitions don't work right with height: auto, so you'd need fixed heights. Also, the "+" part of the CSS doesn't work in IE7, and transitions don't even work in 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 /