1

输出：http: //jsbin.com/APuCOwa/3

编辑：http: //jsbin.com/APuCOwa/3/edit

当您在 Bootstrap 3 中有一个响应表时，当您低于 767px 断点时，无法访问下拉菜单，因为它们添加了内容，并且该大小的内容具有溢出：自动或其他内容，因此取决于菜单——如果桌子本身没有足够的高度——菜单会显示出来，人们不会看到它。Plus 滚动条在您滚动触摸之前不可见。

作为一种解决方法，我需要帮助，我捏造了另一个在单击时不会关闭的切换，并在切换菜单时向父级添加一个类（以添加高度）（您必须调整输出http:/ /jsbin.com/APuCOwa/3低于 767 像素）看到这个。问题是，当用户在打开另一个切换时单击另一个切换，添加到父级的类被删除，尝试切换类和这个东西（这是相同的）并且结果相同。

本质上，当您单击切换时，它会打开，为父“表响应” div 包装器添加高度，并且当您关闭它时，它会撤消它，到目前为止这很好，但是如果您在打开另一个菜单时单击另一个菜单，那是我无法弄清楚的地方。由于它们都是独立的菜单，这让我感到困惑。

我对 jQuery 不是很热情。

输出：http: //jsbin.com/APuCOwa/3

编辑：http: //jsbin.com/APuCOwa/3/edit

顺便说一句：Firefox，至少我的，jsbin 有问题，Chrome 没有。

4

3 回答 3

1

单击时关闭所有内容，并且仅在未打开时才（重新）打开它：

$(document).ready(function() {

$('.table-responsive .dropdown-toggle').click(function(event){

  var open = $(this).hasClass('open');

$('.table-responsive .dropdown-menu').hide('fast');
$(".table-responsive").removeClass("res-drop");
$('.table-responsive .dropdown-toggle').removeClass('open');  
if(!open)
{  
$(this).siblings('.dropdown-menu').slideToggle('fast');
$(this).parents(".table-responsive").addClass("res-drop");
$(this).addClass('open');
}
});
});
于 2013-10-26T21:24:38.677 回答
1

就我而言，我有动态高度，因此 Bass Jobsen 解决方案无法正常工作。

我决定依靠数据属性来存储父 div 的当前高度，然后在下拉关闭时恢复。

这是我的代码：

 var isOpen = !($(this).parent().hasClass("open"));

    var menuHeight = $(this).siblings(".dropdown-menu").height();
    var increaseHeightBy = menuHeight * 1.3;

    var originalHeight = $(this).closest(".table-responsive").attr('data-original-height');

    if (isOpen && !originalHeight) {
        originalHeight = $(this).closest(".table-responsive").height();
        $(this).closest(".table-responsive").attr('data-original-height', originalHeight);
        $(this).closest(".table-responsive").height(originalHeight + increaseHeightBy);
    }

    if (!isOpen && originalHeight) {
        $(this).closest(".table-responsive").height(originalHeight);
        $(this).closest(".table-responsive").removeAttr('data-original-height');
    }
于 2014-07-05T16:26:20.350 回答
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 回答