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填充整个元素，否则您需要在它们上设置特定的宽度。

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

2 个答案: