如何將選定的單選按鈕移到左側

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填充整個元素，否則您需要在其上設置特定的寬度。