1

出力: http://jsbin.com/APuCOwa/3

編集: http://jsbin.com/APuCOwa/3/edit

Bootstrap 3 にレスポンシブ テーブルがある場合、767 ピクセルのブレーク ポイントより下にある場合、ドロップダウン メニューはコンテンツを追加し、そのサイズのコンテンツにはoverflow:auto などがあるため、アクセスできません。メニュー -- テーブル自体の高さが十分でない場合 -- メニューが表示され、ユーザーには表示されません。プラス スクロールバーは、タッチしてスクロールするまで表示されません。

助けが必要な回避策として、クリックしても閉じない別のトグルを一緒にいじり、メニューがトグルされたときに（高さを追加するために）親にクラスを追加します（出力http：/のサイズを変更する必要があります） /jsbin.com/APuCOwa/3 767pxより下) を参照してください。問題は、ユーザーが別のトグルをクリックすると、親に追加されたクラスが削除され、toggleClass とこれ (同じ) を試しても同じ結果になることです。

基本的に、トグルをクリックすると開き、親の「テーブルレスポンシブ」divラッパーに高さが追加され、トグルをオフにすると元に戻ります。これまでのところそれで問題ありませんが、開いているときに別のメニューをクリックすると、分からないところです。それらはすべて独立したメニューであるため、これは私にとって混乱を招きます。

私はjQueryにそれほど熱中していません。

出力: http://jsbin.com/APuCOwa/3

編集: http://jsbin.com/APuCOwa/3/edit

ところで: 少なくとも私の Firefox は jsbin に問題がありますが、Chrome にはありません。

4

3 に答える 3

1

ドロップダウン メニューを固定位置に設定し、ウィンドウのサイズが変更されたときに閉じることができます。完璧な解決策ではありませんが、うまくいきます。

// Responsive tables with dropdown buttons
$('.table-responsive .dropdown-toggle').on('click', function() {
    var button = $(this),
        menu = button.next('.dropdown-menu');

    menu.css({
        position: 'fixed',
        top: button.offset().top + button.outerHeight() - $(window).scrollTop(),
        right: $(window).width() - (button.offset().left + button.outerWidth())
    });

    $(window).on('scroll', function() {
        menu.css({
            top: button.offset().top + button.outerHeight() - $(window).scrollTop()
        });
    });

    $(window).on('resize', function() {
        $('.dropdown-backdrop').trigger('click');
        button.blur();
        $(window).off('resize scroll');
    });
});
于 2014-10-06T16:26:53.330 に答える