使用單選按鈕時無法使下拉工作正常

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>