17

我正在尝试将下拉设置菜单添加到我一直在从事的项目中的评论部分。

下拉菜单似乎会自行关闭，我不知道为什么会这样。

我试过了overflow:visible and z-index:999。但它们似乎都不起作用。

这是一个基本的注释块，我试图在其中包含一个下拉列表

这是我试图实现的基本代码

<div class="media">
    <a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a>
    <div class="dropdown pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;">
            <b data-icon="&#xe001;"></b> <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
        </ul>
    </div>
    <div class="media-body">
        <h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4>
        <p>
            Main body of the comment
        </p>
    </div>
</div>

这就是我的下拉菜单的结果

截屏

媒体 CSS

.media,
.media-body {
  overflow: hidden;
  *overflow: visible;
  zoom: 1;
}
.media,
.media .media {
  margin-top: 15px;
}
.media:first-child {
  margin-top: 0;
}
.media-object {
  display: block;
}
.media-heading {
  margin: 0 0 5px;
}
.media .pull-left {
  margin-right: 10px;
}
.media .pull-right {
  margin-left: 10px;
}
.media-list {
  margin-left: 0;
  list-style: none;
}
4

7 回答 7

23

这不是一个理想的解决方案，因为菜单不会与目标元素一起滚动，但我将滚动数据表作为最后的手段，直到找到替代方案：

(function() {                                             
  var dropdownMenu;                                     
  $(window).on('show.bs.dropdown', function(e) {        
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');             
    dropdownMenu.position({                           
      'my': 'right top',                            
      'at': 'right bottom',                         
      'of': $(e.relatedTarget)                      
    })                                                
  });                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
    $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})();

这会将菜单附加到正文并在隐藏时对其进行清理。我正在使用 jquery UI 进行定位，但如果您不想添加重度依赖项，则可以将其替换为常规 jquery 定位。$(window).on如果您只想对有限的下拉列表进行此操作，您可能还需要进行更改。

于 2014-12-30T19:11:00.527 回答
22

检查媒体类是否有overflow:hidden。如果是这样，请将其替换为overflow: autoor overflow: visible。

于 2013-01-23T06:39:52.873 回答
8

像这样写：

.media,
.media-body {
  overflow: visible;
}

.media:after,
.media-body:after{
 content:'';
 clear:both;
 display:block;
}

可能对你有帮助。

于 2013-01-23T09:14:23.627 回答
2

我有同样的问题。添加此行后，我的下拉菜单按预期工作：

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}

@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

我在这里找到了解决方案

于 2017-04-21T19:41:18.413 回答
1

新方法：

只需将下拉菜单带出媒体类并使用负边距：

 <div class="dropdown pull-right" style="margin-left:-30px">
     ...
 </div>

 <div class="media">
     ...
 </div>
于 2014-07-02T07:54:54.253 回答
0

在我继承的项目中经常得到这个；往往是其中一个父元素的情况

overflow:hidden

一旦我删除它，它似乎可以按预期工作（只要您的设计不依赖此属性）。

于 2017-03-29T07:36:17.013 回答
0

基于@nick 的回答，这就是我在没有 Jquery UI 的 Bootstrap 3 中所做的。

        let dropdown_toggles = $('.my-table .dropdown-toggle');
        dropdown_toggles.each(function (index, elem) {
            let dropdownMenu;
            let dropdown_toggle = $(elem);
            dropdown_toggle.dropdown();
            dropdown_toggle.parent().on('show.bs.dropdown', function(e) {
                let $target = $(e.target);
                let $relatedTarget = $(e.relatedTarget).parent();
                dropdownMenu = $target.find('.dropdown-menu');
                dropdownMenu.css({
                    'position': 'absolute',
                    'z-index': 1,
                    'top': ($relatedTarget.offset().top + $relatedTarget.height()) + 'px',
                    /*'left': $relatedTarget.offset().left + 'px',*/ //from left
                    'left': ($relatedTarget.offset().left - dropdownMenu.width() + $relatedTarget.width()) + 'px', //from right
                });
                $('body').append(dropdownMenu.detach());
                dropdownMenu.css('display', 'block');
            });
            dropdown_toggle.parent().on('hide.bs.dropdown', function(e) {
                $(e.target).append(dropdownMenu.detach());
                dropdownMenu.hide();
            });
        });

这将允许您从左侧或右侧设置绝对位置。

于 2021-07-02T09:41:11.900 回答