對不起，我不太懂英語。
我有一個啟用了內容吸收的選擇器，并且需要為每個下拉選單項啟用一個彈出視窗。問題是當切換按鈕被點擊時，彈出視窗隱藏了與該專案關聯的下拉選單——選擇器本身的下拉串列。
這是我正在使用的 Codepen 中的示例代碼。為了簡單起見，在這個例子中我使用了 setTimeout。請幫助，請理解。
/* push data from request */
function pushDataToDropdown() {
let select = $('#sortByTag');
let parentMarkupObj = {
'markup': `<option>1212123</option>`
};
select.append(parentMarkupObj.markup);
}
/* add popover to select items */
function addOptionsDropdownToTags() {
let allTagInFilter = $('.dropdown-menu.inner li');
allTagInFilter.append('<button type="button" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
}
window.addEventListener('DOMContentLoaded', (event) => {
pushDataToDropdown();
setTimeout(function() {
$('select').selectpicker('refresh');
}, 500)
setTimeout(addOptionsDropdownToTags, 800);
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<select id="sortByTag" class="selectpicker" title="some title" multiply></select>uj5u.com熱心網友回復：
試試這個代碼
/* push data from request */
function pushDataToDropdown() {
let select = $('#sortByTag');
let parentMarkupObj = {
'markup': `<option>1212123</option>`
};
select.append(parentMarkupObj.markup);
}
/* add popover to select items */
function addOptionsDropdownToTags() {
let allTagInFilter = $('.dropdown-menu.inner li');
/* непосредственно вставка дропдауна для каждого пункта селекта */
allTagInFilter.append('<button type="button" data-toggle="popover" title="Popover title" data-content="Popover">Popover btn</button>');
}
window.addEventListener('DOMContentLoaded', (event) => {
pushDataToDropdown();
setTimeout(function() {
$('select').selectpicker('refresh');
}, 500)
setTimeout(function() {
$(document).on('click', '.bootstrap-select', function (e) {
e.stopPropagation();
});
}, 650)
setTimeout(addOptionsDropdownToTags, 800);
});
將此代碼更改$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {為$(document).on('click', '.bootstrap-select', function (e) {
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534530.html