2

我正在使用bootstrap-multiselect插件来更轻松地处理下拉菜单。但是，在尝试默认隐藏菜单时遇到问题。

基本上，我有一个复选框，当这个复选框被选中时，我会显示下拉菜单。当它被取消选中时，菜单应该被隐藏。默认情况下未选中该复选框，因此我希望菜单也默认隐藏。

我尝试使用基本的 CSS 代码将菜单隐藏到我的选择菜单中，如下所示：

<select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....</select>

但这似乎被引导多选中的某些内容所覆盖。如果我删除插件，则显示/隐藏功能可以正常工作，没有问题。

这是我当前的菜单代码

    $(function(){

        $("#related_calls_menu").multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            selectedClass: null,
            selectAllText: 'Select All',
            includeSelectAllOption: true,
            nonSelectedText: 'Select Related Account(s)',
            buttonWidth: '300px'
         });

        $(window).load(function(){
            $("#related_calls_menu").hide();
        });

        $('#complete_related_calls').click(function(){

            if( $(this).is(':checked') )
                $("#related_calls_menu").show();
            else
                $("#related_calls_menu").hide();
        });
    });

我尝试添加.css('visability: hidden; display:none;');到 $("#related_calls_menu")

我也尝试添加此代码

    $(window).on('load', function(){
        $("#related_calls_menu").hide();
    });

没有什么真正起作用，我似乎无法隐藏菜单。此外，当我单击复选框以显示菜单时，我会看到第二个菜单，它没有插件外观。

这是复选框之前的屏幕截图

在此处输入图像描述

这是复选框后的屏幕截图

在此处输入图像描述

请指教。

4

2 回答 2

2

选择标签已被引导程序隐藏。

像这样在您的选择标签周围放置一个包装器 div

<div id="mywrapper">
  <select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....                    </select>
</div>

然后你可以像这样控制包装 div：

CSS：

#mywrapper{
display:none;
}

jQuery

$("#mywrapper").show();
$("#mywrapper").hide();
于 2014-07-10T16:27:28.600 回答
1

可能有一些 CSS 代码与 bootstrap-select 冲突。

使用浏览器检查元素，转到“计算”并验证是什么设置了元素的“显示”属性。

在此处输入图像描述

如果您遇到紧急情况，您可以设置

#related_calls_menu{
  display: none!important;
}

在你的样式表中，直到你解决了这个问题。

于 2014-07-10T15:39:49.873 回答