Question

我有两个按钮用于触发自己的弹出窗口，一旦你点击它，它就会显示弹出窗口，你也可以看到按钮上的+符号变成 - 符号。我需要一个允许的功能：

通过点击屏幕上的任意位置，弹出窗口关闭， - 符号变为+符号。
再次单击该按钮，弹出窗口关闭， - 符号变为+符号。
通过单击另一个按钮，弹出窗口关闭， - 符号变为+符号，另一个按钮的+符号变为 - 符号，并且它自己的弹出窗口弹出窗口

希望你们能给我一些想法，我将不胜感激！

这是我当前的jquery代码：

function change() {
    $(".consistbtn").each(function (index) {
//.consistbtn is the class of the link button you see.
        $("#popover" + index).click(function (e) {
//#popover+index is the unique id for the button 
            $("#swpimg" + index + ">img").toggle();
//#swpimg is the div id wraped  + and - as imgs.
        })
    });
}
$(function () {
    $(".consistbtn").popover({
        trigger: 'focus',
        html: true
    });
    $(".consistbtn").on('hidden.bs.popover', function () {
        $(this).parent().find(".pop_on").show();
        $(this).parent().find(".pop_off").hide();

    });
    $(".consistbtn").on('shown.bs.popover', function () {
        $(this).parent().find(".pop_on").hide();
        $(this).parent().find(".pop_off").show();
    });
})
$(document).ready(function () {

    $('.pop_off').hide();
    $('.pop_on').show();
});

Answer 1

要使show-and-hide功能按您的需要运行，只需将弹出窗口的trigger - 属性设置为"focus"即可。为了使它在onClick上消失，你可以在所显示的事件中点击按钮上的一次点击处理程序，使其失去焦点（例如，通过调用它上面的blur()）。请注意，如果按钮在通过其他操作（单击另一个按钮或某个按钮）失去焦点后被点击，则不会被触发。

至于图标：将事件处理程序附加到您的弹出窗口并添加/删除相应的类，如下例所示（这个使用fa）：

示例

＆＃13;
＆＃13;
$(function () { $('.btn-po-pm').popover({ // trigger popover on focus realizes most of what you want. trigger: "focus", placement: "top" }).on('shown.bs.popover', function() { $(this).find('.fa').removeClass('fa-plus').addClass('fa-minus'); // switch icon-classes $('.btn-po-pm').unbind('click'); // remove old click handlers $(this).one('click', function(e) { $(this).blur(); // make element lose focus (this triggers the popovers hide-event) }); }).on('hidden.bs.popover', function() { $(this).find('.fa').removeClass('fa-minus').addClass('fa-plus'); // switch icon-classes }).focusout(function(){ $('.btn-po-pm').unbind('click'); // remove one time click handler on lose focus, to prevent show-and-close immediately }); })
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <h1>Popover sample</h1> <button class="btn btn-primary btn-po-pm" data-toggle="popover" data-content="The one popover"><i class="fa fa-fw fa-plus"></i> The one</button> <button class="btn btn-primary btn-po-pm" data-toggle="popover" data-content="The other popover"><i class="fa fa-fw fa-plus"></i> The other one</button>
＆＃13;
＆＃13;
＆＃13;

Bootstrap popover函数问题

1 个答案: