嵌套項目的手風琴控制

Question

我已經創建了手風琴控制器，並且在該手風琴控制器中它有2個單選按鈕和按鈕。我已經在HTML5中使用javascrip和css創建了Dot net.When任何單選按鈕在相同的手風琴面板中被選中當另一個單選按鈕被選中時，第一個單選按鈕的面板應該被禁用，並且另一個面板應該以相同的手風琴控制被看到

Answer 1

這可以單獨使用CSS，通過:checked僞-selector。

例子：

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/