Bootstrap material 设计 - 波纹不显示在弹出窗口中

Question

我正在使用 bootstrap material 设计：https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

这包括按下按钮时的简洁波纹效果，这在我的页面中无处不在，除了在 html 中具有 display:none 的弹出窗口 div 之外javascript.

的用户

HTML:

<a href="#" class="pop" data-id="#popover_div1" data-container="body" data-placement="top" title="Popover title">Click to open popover</a>
<div id="popover_div1" style="display: none">
    <div>
        <img class="img-rounded" src="img/temp.png" alt="temp" height="25" width="25"/>
        This is your div content
    </div>
    <div>
        <div class="btn-group">
            <a href="javascript:void(0)" class="btn btn-default">5</a>
            <a href="javascript:void(0)" class="btn btn-default">6</a>
            <a href="javascript:void(0)" class="btn btn-default">7</a>
        </div>
    </div>
</div>

JS:

$(".pop").popover({
    trigger: "manual", 
    html: true, 
    animation:false, 
    content: function() {
        return $($(this).attr('data-id')).html();
    }
}).on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
        $(_this).popover('hide');
    });
}).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    }, 200);
});

如果我去掉 style="display:none"，涟漪效果有效，但包含它会使涟漪效果对 div 内的按钮不起作用，真的很奇怪。有什么方法可以让我保留 display:none（因为那样弹出窗口就像我想要的那样工作），但仍然对 div 中的按钮产生涟漪效应？

Answer 1

显示弹出窗口后尝试调用 $.material.ripples()。

Bootstrap material 设计 - 波纹不显示在弹出窗口中

Bootstrap material design - Ripples not showing in popover

html

javascript

css

twitter-bootstrap

bootstrap-material-design