使用单选按钮时无法使下拉工作正常

Question

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

的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>组标签外，下拉正常工作的项目。

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>