Jquery 折叠包含boostrap multiselect中所有未选中选项的OptGroup

我在应用程序中使用boostrap multiselect。选择框包含三个optgroup。每当我单击其中的某个复选框时，我想在切换到另一个optgroup后折叠optgroup

下面是示例代码

<select multiple="multiple" id="food_type">
    <optgroup label="Breakfast">
        <option value="Burger">Burger</option>
        <option value="Fries">Fries</option>
    </optgroup>
    <optgroup label="Lunch">
        <option value="Pizza">Pizza</option>
        <option value="Thali">Thali</option>
    </optgroup>
    <optgroup label="Desserts">
        <option value="Icecreame">Icecreame</option>
        <option value="Fruit Salad">Fruit Salad</option>
    </optgroup>
</select>

$("#food_type").multiselect({
    numberDisplayed: 1,
    buttonText: function (options, select){
        return "Food Types";
    },
    enableCollapsibleOptGroups: true,
    collapseOptGroupsByDefault: true
});

汉堡
炸薯条
披萨
塔利
冰淇淋
水果沙拉
$（“#食品类型”）.多选({
显示的数字：1，
按钮文字：功能（选项，选择）{
返回“食物类型”；
},
EnableCollapsableOptGroups:true，
collapseOptGroupsByDefault:真
});

默认情况下，所有OptGroup都将折叠。切换到另一个optgroup进行选择后，我想切换optgroups的折叠和展开

我找不到bootstrap mulitselect文档中提供的默认功能。有人能帮我吗

提前谢谢

默认情况下，所有OptGroup都将折叠。切换到另一个optgroup进行选择后，我想切换optgroups的折叠和展开

可以将单击事件处理程序附加到每个多选组元素。在该选项中，可以切换其他选项组的可见性

$（“#食品类型”）。多选({
显示的数字：1，
按钮文字：功能（选项，选择）{
返回“食物类型”；
},
EnableCollapsableOptGroups:true，
collapseOptGroupsByDefault:真
}).data（'multiselect'）。$ul.find（'multiselect group'）。打开（'click'，函数（e）{
$（this）.sides（'.multiselect group'）.nextUntil（'.multiselect group'））
.addClass（'multiselect-collappable-hidden'）.hide（）；
});

汉堡
炸薯条
披萨
塔利
冰淇淋
水果沙拉