1

私はアコーディオン コントロールを作成しました。そのアコーディオン コントロールには 2 つのラジオ ボタンとボタンがあります。ドット ネットで javascrip と css を使用して HTML5 で作成しました。ラジオ ボタンの誰かが同じアコーディオン パネルでチェックされている場合、他のコントロール パネルを開く必要があります。別のラジオ ボタンがチェックされると、最初のラジオ ボタンのパネルが無効になり、別のパネルが同じアコーディオン コントロールに表示されます。

4

2 に答える 2

0

: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 では機能しません。

于 2012-05-31T08:16:10.563 に答える
0

これは、他の回答と本質的に同じものの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 の方法は、この jsFiddle のように、CSS の規則で許可されていないこと (親要素の外側の要素に影響を与えるなど) を行うことができるという点でより柔軟です: http://jsfiddle.net/dH65w/2 /

于 2012-05-31T08:35:44.477 に答える