複選框有一個可點擊的一個下拉列表

您好我有一個關於我的代碼的問題，因爲我想達到與它周圍的一個可點擊的下拉列表下面的複選框（我在YouTube上的記錄顯示你）：複選框有一個可點擊的一個下拉列表

鏈接：https://www.youtube.com/watch?v=ZodCcVHCAUo&feature=youtu.be

我也把代碼中的jsfiddle所以這裏是鏈接吧： http://jsfiddle.net/yomacho/ghv5aosv/

而且我也將在這裏把代碼（但我不能把bootstrap.min.js因爲它太長了所以你需要去上面給出的鏈接）：

的HTML：

<div class="col-md-1"> 
    <li> 
     <div id="ButtonDropDown" href="#" class="ButtonDropDown"> 
      <input type="checkbox" class="check"> 
       <select class="showDropdown"> 
        <option value="volvo" >Volvo</option> 
        <option value="saab">Saab</option> 
        <option value="mercedes">Mercedes</option> 
        <option value="audi">Audi</option> 
       </select> 
     </div> 

     <div class="btn-group"> 
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 

      </button> 

      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </div>     
    </li> 
</div>

而CSS：

.showDropdown{ 
    display: none; 
} 

.ButtonDropDown:hover .showDropdown{ 
    display: block; 
} 

#ButtonDropDown{ 
    display: inline-block; 
    background: #ddd; 
    border: 1px solid #ccc; 
    padding: 5px 10px; 
    color: blue; 
    cursor: pointer; 
} 
.showDropdown{ 
    width: 15px; 
}

我真的很感激，如果有人也知道如何做它的一個響應的版本。如果有人知道它的反應不靈敏，那麼我也很樂意知道這一點。因爲我只是好奇而已。無論如何感謝您的回答。

來源

2014-10-09 superkytoz

你在找這樣的事嗎？ http://jsfiddle.net/nklein/Lm0t1aa8/

以下javascript可防止單擊複選框時打開的下拉列表，但允許選中該框。

$('.check').on('click', function (ev) { 
    ev.stopPropagation(); 
});

編輯：

我已經更新了的jsfiddle，以下事件將添加/刪除「插入符號」箭頭，當你將鼠標懸停/停止上空盤旋的元素。

$('#selCars').on('mouseover', function (ev) { 
    $('#selCars .caret-hover').addClass('caret'); 
}); 
$('#selCars').on('mouseout', function (ev) { 
    $('#selCars .caret-hover').removeClass('caret'); 
});

來源

2014-10-10 14:38:55 nklein

幾乎因爲懸停部分錯過。所以當我懸停在複選框附近時，會出現一個箭頭。當我點擊它時，它會顯示一個下拉列表。我已經試圖隱藏你的代碼中的按鈕，但是我也隱藏了複選框..我其實不想要的。 – superkytoz 2014-10-10 14:57:32

我已經更新了jsfiddle，現在看看它 – nklein 2014-10-10 15:11:32

嗨，再次感謝您的反應。但它仍然不一樣，因爲當顯示下拉菜單並且當我懸停在按鈕上時，「脫字符號」箭頭消失。哪些不應該發生。如果出現「脫字符號」箭頭，按鈕也會改變。這也不應該發生..如果我說的最後一件事太多了，那麼我不介意這樣做。 – superkytoz 2014-10-10 15:31:17

複選框有一個可點擊的一個下拉列表

回答

相關問題