如何将选定的单选按钮移动到左侧

Question

我想要实现的是，当有人单击一个单选按钮时，该按钮通过隐藏其他单选按钮向左移动，从而创建可折叠的效果。

我试着用css float：left属性和它的移动，但只能看到一个矩形。这里是我的代码

的Html

<form> 
    <group class="inline-radio"> 
    <div> 
     <input id="opt1" type="radio" name="title"> 
     <label>opt1</label> 
    </div> 
    <div> 
     <input id="opt2" type="radio" name="title"> 
     <label>opt2</label> 
    </div> 
    <div> 
     <input id="opt3" type="radio" name="title"> 
     <label>opt3</label> 
    </div> 
    <div> 
     <input id="opt4" type="radio" name="title"> 
     <label>opt4</label> 
    </div> 
    <div> 
     <input id="opt5" type="radio" name="title"> 
     <label>others</label> 
    </div> 
    </group> 

</form> 

的JavaScript

//for toggling 
var hid = false; 

$("group.inline-radio").click(function() { 
    if (hid == false) { 

    $('group.inline-radio').find('input[type="radio"]').not(':checked').hide().siblings('label').hide(); 

    hid = true; 
    return; 
    } else { 
    $('group.inline-radio').find('input[type="radio"]').not(':checked').show().siblings('label').show(); 

    hid = false; 
    } 

}); 

这里是codepen http://codepen.io/flyingboy007/pen/ojoVWe

Answer 1

在你的CSS改变DIV选择这样：

div { 
position: relative; 
width: 20%; 
float:left; 
} 

，改变你的JavaScript这样的：

var hid = false; 

$("group.inline-radio").click(function() { 
    if (hid == false) { 

    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().hide(); 

    hid = true; 
    return; 
    } else { 
    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().show(); 

    hid = false; 
    } 

}); 

Codepen：http://codepen.io/anon/pen/ojpNVq

Answer 2

你需要隐藏的div包裹未选中的无线电元素的代码。那么你不必担心标签，因为它们也在父div中。

http://codepen.io/anon/pen/LpeYod

var hid = false; 

$("group.inline-radio").click(function() { 
    if (hid == false) { 

    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().hide(); 

    hid = true; 
    return; 
    } else { 
    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().show(); 

    hid = false; 
    } 

}); 

而且，除非你想选择的div来填满整个元素，那么你需要设定具体的宽度在他们身上。