2

ドロップダウンメニューの扱いを簡単にするために、bootstrap-multiselectプラグインを使用しています。ただし、デフォルトでメニューを非表示にしようとすると問題が発生します。

基本的にチェックボックスがあり、このチェックボックスがチェックされている場合、ドロップダウンメニューを表示します。チェックを外すと、メニューが非表示になります。チェックボックスはデフォルトでオフになっているので、メニューもデフォルトで非表示にします。

次のように、選択メニューに基本的なcssコードを使用してメニューを非表示にしようとしました:

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

しかし、これはbootstrap-multiselectの何かによって上書きされているようです。プラグインを削除すると、表示/非表示機能は問題なく正常に動作します。

これはメニューの現在のコードです

    $(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();
    });

何も実際に機能していません。メニューを非表示にすることはできません。また、チェック ボックスをクリックしてメニューを表示すると、プラグインの外観がない 2 番目のメニューが表示されます。

これはチェックボックスの前のスクリーンショットです

ここに画像の説明を入力

これはチェックボックスの後のスクリーンショットです

ここに画像の説明を入力

お知らせ下さい。

4

2 に答える 2

2

Select タグは、ブートストラップによって既に非表示になっています。

このようにselectタグの周りにラッパー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

bootstrap-select と競合する CSS コードがいくつかある可能性があります。

ブラウザで要素を検査し、「計算済み」に移動して、要素の「表示」の妥当性を設定しているものを確認します。

ここに画像の説明を入力

緊急の場合は、

#related_calls_menu{
  display: none!important;
}

これが解決されるまで、スタイルシートで。

于 2014-07-10T15:39:49.873 に答える