Javascript 默认情况下，如何使引导multiselect OptGroup崩溃？

我在使用时将

enableCollapsableOptGroups

设置为true

我现在所拥有的：

我希望在默认情况下折叠OptGroup：

---

我在这里添加了一个简单的例子：

诀窍是在加载页面后为每个组触发一次单击事件：

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableCollapsibleOptGroups-collapsed').multiselect({
            enableCollapsibleOptGroups: true,
            buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'
        });
        $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
    });
</script>
<select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
    <optgroup label="Group 1">
        <option value="1-1" disabled>Option 1.1</option>
        <option value="1-2" selected="selected">Option 1.2</option>
        <option value="1-3" selected="selected">Option 1.3</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="2-1">Option 2.1</option>
        <option value="2-2">Option 2.2</option>
        <option value="2-3">Option 2.3</option>
    </optgroup>
</select>

$（文档）.ready（函数（）{
$（“#示例EnableCollapsableOptGroups collapsed”）.multiselect({
EnableCollapsableOptGroups:true，
按钮容器：“”
});
$（“#示例EnableCollapsableOptGroups collapsed container.caret container”）。单击（）；
});
备选案文1.1
备选案文1.2
备选案文1.3
备选案文2.1
备选案文2.2
备选案文2.3

大卫的回答对我不起作用。但这两种解决方案奏效了：

解决方案1:

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />',
onDropdownShown: function() {
                $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
            },
onDropdownHidden: function() {
                $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
            }

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'

---

我想出了不同的解决方案，对我来说效果很好

HTML:

---

经过长时间的尝试，它对我有效

代码如下：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<select id="products" multiple="multiple">
                    <optgroup class="test" label="Group 1" >
                        <option value="Option 1.1">Option 1.1</option>
                        <option value="Option 1.2">Option 1.2</option>
                        <option value="Option 1.3">Option 1.3</option>
                    </optgroup>
                    <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                    </optgroup>

</select>

<script type="text/javascript">
        $(document).ready(function() {
            $('#products').multiselect({
                enableCollapsibleOptGroups: true,
                collapseOptGroupsByDefault: true
            });
        });
</script>

<style>
li.multiselect-item.multiselect-group input[type="checkbox"]{
    display:none;
}
</style>

备选案文1.1
备选案文1.2
备选案文1.3
备选案文2.1
备选案文2.2
备选案文2.3
$（文档）.ready（函数（）{
$（“#产品”）。多选({
EnableCollapsableOptGroups:true，
collapseOptGroupsByDefault:真
});
});
li.multiselect-item.multiselect-group输入[type=“checkbox”]{
显示：无；
}

---

不起作用。我必须在onDropdownShown/Ondropdownshidden上做这件事。另一种解决方案是在2秒后执行，如：setTimeout（函数（）{$（'#示例EnableCollapsableOptGroups collapsed container.caret container'）。click（）；}，2000）；无论如何，谢谢你的帮助！您是否检查了文档（）中提供的示例？这个例子的关键是

$（document）.ready（function（）{…}）因为页面需要先加载。我知道。我已经在ready函数中安装了它，但它仍然不起作用。好的，谢谢你的反馈。我们将更仔细地看一看这个例子。如果你偶然发现这个问题，请告诉我；）这是最好的解决方案，因为如果有许多选项，触发单击事件需要时间。
<div id="multiselect-filter-dropdown-wrapper">
  <label id="multiselect-filter-dropdown-label">Filter:</label>

  <select multiple id="multiselect-filter-dropdown"></select>
</div>

$('#multiselect-filter-dropdown').multiselect({
  enableCollapsibleOptGroups: true
}); //init with required options

$('#multiselect-filter-dropdown').multiselect('dataprovider', multiselectFilterDataProvider); //populate with required data

$('#multiselect-filter-dropdown-wrapper ul.multiselect-container li:not(.multiselect-all):not(.multiselect-group)')
.hide()
.addClass('multiselect-collapsible-hidden'); //collapse required opt groups

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<select id="products" multiple="multiple">
                    <optgroup class="test" label="Group 1" >
                        <option value="Option 1.1">Option 1.1</option>
                        <option value="Option 1.2">Option 1.2</option>
                        <option value="Option 1.3">Option 1.3</option>
                    </optgroup>
                    <optgroup label="Group 2">
                        <option value="2-1">Option 2.1</option>
                        <option value="2-2">Option 2.2</option>
                        <option value="2-3">Option 2.3</option>
                    </optgroup>

</select>

<script type="text/javascript">
        $(document).ready(function() {
            $('#products').multiselect({
                enableCollapsibleOptGroups: true,
                collapseOptGroupsByDefault: true
            });
        });
</script>

<style>
li.multiselect-item.multiselect-group input[type="checkbox"]{
    display:none;
}
</style>