文章/答案/技术大牛

发布

社区首页 >问答首页 >bootstrap 4.1.3 dropdown+proper+可滚动菜单=闪烁

问bootstrap 4.1.3 dropdown+proper+可滚动菜单=闪烁
EN

Stack Overflow用户

提问于 2019-05-09 19:50:05

回答 2查看 255关注 0票数 2

如果我添加到dropmenu+popover滚动，然后当我直接悬停在适当的它开始闪烁。我怎么才能修复它？请帮帮我

for(var i =0;i<15;i++){
$('.dropdown-menu').append('<a class="dropdown-item" > helloWorld <button type="button" class="noneButton lockFont"  data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="hover"> <i class="fas fa-lock clockFont"></i></button></a>')
}

$('.lockFont').popover();
$('.lockFont').popover({ trigger: "hover" })

.dropdown-menu {

    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    
    
      <div class="dropdown ">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            
                    </div>
                    </div>

twitter-bootstrap

bootstrap-4

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-11 20:51:27

$('.lockFont').popover({
     boundary:'window',
});

票数 1

Stack Overflow用户

发布于 2019-05-09 20:54:09

使用mouseenter而不是popover和data-trigger="focus"试试这个

$('.lockFont').mouseenter(function(){
    $(this).trigger('focus');
});

//$('.lockFont').popover({ trigger: "hover" })

for(var i =0;i<15;i++){
$('.dropdown-menu').append('<a class="dropdown-item" > helloWorld <button type="button" class="noneButton lockFont"  data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="focus"> <i class="fas fa-lock clockFont"></i></button></a>')
}

$('.lockFont').popover();
//$('.lockFont').popover({ trigger: "hover" })
$('.lockFont').mouseenter(function(){
    $(this).trigger('focus');
});

$('body').mouseover(function (e) {
    $('.lockFont').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

.dropdown-menu {

    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <body>
    
      <div class="dropdown ">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            
                    </div>
                    </div>
                    </body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56058780

复制

相似问题

问bootstrap 4.1.3 dropdown+proper+可滚动菜单=闪烁
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap 4.1.3 dropdown+proper+可滚动菜单=闪烁EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap 4.1.3 dropdown+proper+可滚动菜单=闪烁
EN