У меня есть несколько кнопок, и для каждого из них нужно добавить popover.
я хочу это так:
когда мой пользователь нажимает на один из них, я хочу, чтобы другие были скрыты. так отображается только один popover
проверьте и помогите мне исправить этот пример plz:
var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'
$('.btn').popover({
html: true,
content:mycontent,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});
$('html').click(function(e) {
$('.btn').popover('hide');
});
my html:
<ul>
<li>
<a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
</li>
<li>
<a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
</li>
</ul>
добавив что-то вроде кода ниже, я решил как-то решить проблему:
$('.btn').click(function(e) {
$('.btn').popover('hide');
});
но дважды щелкнув по каждой кнопке, это будет не так.
каким-то образом я создал один пример для моей потребности. Я использовал этот код:
$('.btn').popover();
$('.btn').on('click', function (e) {
$('.btn').not(this).popover('hide');
});
просмотрите демонстрацию
и скорректировал предыдущую демонстрацию я надеюсь, что это поможет кому-то еще
Ни один из ответов, которые я видел ранее, не имел динамических popovers, так что это то, что я придумал. Как указывали некоторые, есть проблемы с popovers, вызывающими проблемы, если они не удаляются из DOM с помощью .remove(). Я искал пример с сайта bootstrap и создал эту новую скрипту. Динамические popovers добавляются с помощью опции selector: '[rel=popover]'. Когда появится popover, я вызываю destroy на всех других popovers, а затем удаляю содержимое .popover со страницы.
$('body').popover({
selector: '[rel=popover]',
trigger: "click"
}).on("show.bs.popover", function(e){
// hide all other popovers
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
});
Самый простой способ сделать это - установить trigger="focus" в своем popover
Отклонить следующий клик
Используйте триггер фокуса, чтобы отклонить popovers при следующем щелчке, чтобы пользователь делает.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here some amazing content. It very engaging. Right?">Dismissible popover</a>
Примечание - это означает, что popover скроется, как только вы нажмете на него
Это быстрое универсальное решение, которое я использую, когда вам не нужно заранее знать, какие классы имеют popovers. Я не тестировал его очень широко. Кроме того, я использую toggle ниже, поскольку у меня были некоторые проблемы с тем, что поведение шкурки было совершенно иным, чем переключение.
var $currentPopover = null;
$(document).on('shown.bs.popover', function (ev) {
var $target = $(ev.target);
if ($currentPopover && ($currentPopover.get(0) != $target.get(0))) {
$currentPopover.popover('toggle');
}
$currentPopover = $target;
});
$(document).on('hidden.bs.popover', function (ev) {
var $target = $(ev.target);
if ($currentPopover && ($currentPopover.get(0) == $target.get(0))) {
$currentPopover = null;
}
});
Вы относитесь к этому слишком серьезно, просто закройте все открытые всплывающие окна, прежде чем запускать новый, который нужно открыть:
// Hide any active popover first
$(".popover").each(function () {
var $this = $(this);
$this.popover('hide');
});
//Now Execute your new popover
$('.btn').popover({
html: true,
content: mycontent,
trigger: 'manual'
}).click(function (e) {
$(this).popover('toggle');
e.stopPropagation();
});
Вот решение, которое сработало для меня. В моих сценариях я не пропускаю vars через атрибут data в HTML, я предпочитаю логику в своих js файлах.
$(".vote").popover({
trigger: " click",
title: "Attention",
content: "You must be a member of the site to vote on answers.",
placement: 'right'
});
$('.vote').on('click', function (e) {
$('.vote').not(this).popover('hide');
});
Использование Bootstrap 3.3.7 Я нахожу это решение:
var _popoverLink = $('[data-toggle="popover"]');
_popoverLink.on('click', function(){
_popoverLink.popover('destroy').popover({container: 'body'});
$(this).popover('show');
});
С уважением.
У меня возникли трудности с использованием любого из ответов, опубликованных для решения этой проблемы, используя bootstrap v3. После некоторого поиска я обнаружил, что моя основная проблема заключается не в установке правильного триггера popover. Он должен быть установлен как "ручной", как указано в op-вопросе.
Следующий шаг был очень прост и дает лучшее поведение, чем решения, которые я вижу в других ответах, поэтому я думал, что буду делиться.
$('html').on('click', function(e) {
if($(e.target).hasClass('btn')) {
$(e.target).popover('toggle');
}
if(!$(e.target).parent().hasClass('popover')) {
$('.popover').prev('.btn').not(e.target).popover('toggle');
}
});
Это решение дает вам возможность отклонить popover после щелчка в любом месте на странице, включая другую ссылку для popover, но позволяет вам щелкнуть по самому popover, не отпуская его, чтобы пользователь мог получить доступ к пользователю для таких вещей, как copy вставка текста.
Надеюсь, это поможет кому-то, вот рабочая скрипка. https://jsfiddle.net/hL0pvaty/
p.s. - Я использую класс .btn как селектор в моем примере, потому что он используется в вопросе op. Я бы рекомендовал использовать что-то менее общее.
Я пошел на комбинации подходов, которые я видел как на этой теме, так и на других. Мои требования указывают, что:
Не требуется перезаписывать событие popover
function bindEvents() {
setupPopupBinding();
setupPopupDismissal();
};
function setupPopupBinding() {
$('.addSectionItem').popover({
html: true,
content: function () {
return createDropdowns($(this).data('sectionid'))[0].outerHTML;
},
placement: "right",
trigger: "click focus"
}).on("inserted.bs.popover", function (e) {
//initialize dropdown
setupSelect2();
}).on("hide.bs.popover", function (e) {
$('.select2-container--open').remove();
});
}
function setupPopupDismissal() {
$('body:not(.addSectionItem)').on('click', function (e) {
$('.addSectionItem').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
$('.popover').has(e.target).remove();
}
});
});
}
function createDropdowns(sectionId: number) {
var dropdown = $('<div/>')
.attr('Id', 'sectionPopupWrapper' + sectionId)
.addClass('popupWrapper')
.append($('<select/>').addClass('sectionPopup'))
.append($('<button/>').addClass('btn btn-primary btn-xs')
.attr('data-sectionid', sectionId)
.text('Add'));
return dropdown;
}
<ul>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>1</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>2</li>
<li><i class="fa fa-trash-o DeleteRow" id=""></i>3</li>
</ul>
// Close other popover when click on Delete/Open new popover - START //
$('.DeleteRow').on('click', function (e) {
$('.popover').not(this).popover('hide');
});
// Close other popover when click on Delete/Open new popover - END//