时间戳

首页 > 解决方案 > bootstrap 4.1.3下拉+正确+可滚动菜单=闪烁

javascript - bootstrap 4.1.3下拉+正确+可滚动菜单=闪烁

问题描述

如果我添加到 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>

标签： javascriptjqueryhtmltwitter-bootstrapbootstrap-4

解决方案

使用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>

推荐阅读