Question

我通过添加下拉列表来扩展radiobuttons。 radiobutton具有滑动效果，隐藏所有未选择的单选按钮。但是当我用radiobutton添加下拉列表时，下拉列表不起作用。

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>

                  <!-- DropDown -->
               <div class="dropdown">
                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   Others
                   <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                   <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>
                   <li><a href="#">Something else here</a></li>
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div>
               <!-- DropDown End-->

  </group>
  <span>Please choose one</span>

</form>

的javascript

//for toggling  
var hid = false;

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

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



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

    hid = false;
  }

});


$("input:radio[name=title]").click(function() {

     var   id= $(this).attr('id');
      var value;
  var value;
 $("input:radio[name=title]")
  switch (id) {
    case "opt1":
        value = "opt1";
        break;
    case "opt2":
        value = "opt2";
        break;
    case "opt3":
        value = "opt3";
        break;
    case "opt4":
        value = "opt4";
        break;
    case "opt5":
        value = "opt5";
        break;
    case "opt6":
        value = "opt6";
        break;
    case "opt7":
        value = "opt7";
        break;

      default: 
        value = "Please choose an option";
}
 $( "span" ).text( value );

    });

以下是codepen http://codepen.io/flyingboy007/pen/wKpWoY

中的项目

Answer 1

想想我可能已经找到了它。删除溢出：隐藏：

.inline-radio {
  display: flex;
  border-radius: 3px;
  /*overflow: hidden;*/
  border: 1px solid #b6b6b6;
}

这会返回下拉选项以供选择。

关于这里的功能，我会检查js切换功能，看它是单选按钮还是单击的下拉按钮。相应调整以隐藏单击单选按钮或选择列表项元素。

还为输出范围提供一个类，并在显示提示/消息时使用它。

<span class="tip">Please choose one</span>

和

$("span.tip").text(value);

这可以防止按钮旁边出现消息（也有一个跨度）。

Answer 2

如果您将<div class="dropdown">.....</div>移到GROUP标记之外，则下拉列表工作正常。

DEMO：http://codepen.io/anon/pen/NGXwdE

<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>
  </group>

  <!-- DropDown -->
  <div class="dropdown">
                 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                   Others
                   <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                   <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>
                   <li><a href="#">Something else here</a></li>
                   <li><a href="#">Separated link</a></li>
                 </ul>
  </div>
  <!-- DropDown End-->

  <span>Please choose one</span>

</form>

使用radiobutton放置时无法获得下拉工作

2 个答案: