防止在溢出:隐藏容器中打开多个下拉菜单

时间:2019-01-15 05:06:56

标签: angularjs twitter-bootstrap-3 drop-down-menu overflow dropdown

我有一个模态表,其中包含多个引导程序下拉列表。这是一个溢出:自动滚动容器。因此,为防止下拉菜单被截断,我编写了一个jquery函数。现在的问题是,当我单击一个下拉列表时,它会打开,如果我打开另一个,则上一个下拉列表不会被关闭。 e.preventDefault和e.stopPropogation没有帮助。

e.preventDefault和e.stopPropogation没有帮助。

<div class="btn-group action-dropdown btn-action fright dropdown"> . 
    <button class="btn btn-primary" data-toggle"{{(dafaultTableAction!=undefined?'':'dropdown')}}">
         <span ng-click="dafaultTableAction.popupToConfirm?callActionWithWarning(item,dafaultTableAction): callTableRecordActionEvent(null,item,dafaultTableAction,(dafaultTableAction.questActionId.rule=='VIEW'?true:false))"> {{dafaultTableAction!=null?dafaultTableAction.title:'Take Action'}} . 
         </span>
     </button>
     <button class="btn list dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> 
        <i class="fa fa-angle-down"></i>
    </button>
    <div class="dropdown-menu events-dropdown olt-dropdown" id="progress">
        <ul>
            <li class="dropdown-item" ng-repeat='tableAction in tableActionList' ng-click="tableAction.popupToConfirm?callActionWithWarning(item,tableAction):callTableRecordActionEvent(null,item,tableAction,(tableAction.questActionId.rule=='VIEW'?true:false))">
            </li> 
        </ul>
    </div>
</div>


    var dropdownMenu;  
    var dropdownMenuBtn;
    $('.table-box').on('show.bs.dropdown', function (e) {
        dropdownMenu = $(e.target).find('.dropdown-menu');
        dropdownMenuBtn = $(e.target).find('.dropdown-toggle');  
        $('.olt-view .table-box').append(dropdownMenu.detach());        
        e.stopPropagation();
        e.preventDefault();    
        dropdownMenu.css('display', 'block');             
        dropdownMenu.position({                           
        'my': 'right top',                            
        'at': 'right bottom',                         
        'of': $(e.relatedTarget)                      
        })                                     
    });    

    $('.table-box').on('hide.bs.dropdown', function(e) {     
        e.stopPropagation();
        e.preventDefault();   
        $(e.target).append(dropdownMenu.detach());        
        dropdownMenu.hide();    
        dropdownMenu.css('display','none');                                                         
    });

0 个答案:

没有答案