9

jquery selectmenu プラグインを使用しています。selectを初期化しました 

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

多くのオプションがあり、これによりデフォルトのブラウザースクロールバーが表示されますが、使用できません。このバーをクリックしてドラッグしようとすると、selectmenu が閉じます。マウスホイールでスクロールできます。css とさまざまなプラグインで競合が発生する可能性があります。しかし、どこから探し始めればよいかわかりません。

この問題の原因は何ですか?

4

5 に答える 5

13

CSS で開いたときの selectmenu のコンテンツの最大高さを設定すると、使用できるアイテムのリスト内にスクロールバーが表示されます。

ul.ui-menu { max-height: 420px !important; }

クラス 'ui-menu' が割り当てられた <ul> 要素を含む他の jQuery UI ウィジェットを使用している場合は、CSS でこのスタイル変更をさらに制限する必要がある場合があります。

于 2014-11-18T16:09:15.383 に答える
4

JQueryUI デモページの「番号を選択」の例の解決策が示されています。

$('select').selectmenu().selectmenu("menuWidget").css("height","200px");
于 2015-10-27T14:30:32.297 に答える
1

js ファイルのこのセクションに問題があるようです。

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

スクロールバーは「if」句の条件に一致するため、selectmenu が閉じられます...

誰かがこのバグの解決策を提供するまで、"if" 句内の行にコメントを付けることができます。このように、選択メニューをクリックしても閉じませんが、オプションを選択すると閉じます...

編集：

わかりました、それは今働いています。前に示したセクションを次のように変更します。

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

このように、スクロールバーは「ui-selectmenu-menu-dropdown」クラスの div の一部であるため、スクロールバーを移動しても selectmenu は閉じられません。

于 2013-10-16T18:57:16.353 に答える
0 
<!--JQUERY-->
$('.custom-combobox-toggle').on('click',function (e) {
      e.preventDefault();
      $('.ui-menu').addClass('custom-scroll');
});

<!--CSS-->
.ui-widget.ui-widget-content.custom-scroll {
    max-height: 300px;
    overflow: auto;
    display: block;
}
于 2019-07-03T07:30:43.767 に答える
0

IDごとに各アイテムの最大高さを設定したい場合。使用する：

#select1-menu { max-height: 150px !important; }
#select2-menu { max-height: 200px !important; }

たとえば、selectmenu の ID は 'select' です。

#select-menu { max-height: 150px !important; }
于 2015-05-28T07:51:39.643 に答える