Показать один поповер и скрыть другие поповеры
у меня есть несколько кнопок и мне нужен пирог для каждого.
я хочу, чтобы это было так:
когда мой пользователь нажимает на одну из них, я хочу, чтобы другие были скрыты. так что только один пирог отображается
проверьте и помогите мне исправить этот пример 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');
});
мой 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');
});
но, нажав дважды на каждом кнопка идет не так
12 ответов:
как-то я создал один пример для моей потребности. я использовал этот код:
$('.btn').popover(); $('.btn').on('click', function (e) { $('.btn').not(this).popover('hide'); });
Регистрация демо здесь
исправлено демо я надеюсь, что это поможет кому-то еще
ни один из ответов, которые я видел ранее, не имел динамических всплывающих окон, так что это то, что я придумал. Как некоторые отметили, есть проблемы с popovers, вызывающие проблемы, если они не удаляются из DOM с помощью
.remove()
. Я раздвоил пример С сайта bootstrap и создан эта новая скрипка. Динамические всплывающие окна добавляются с помощью . Когда всплывающее окно будет показано, я вызываю destroy на всех других всплывающих окнах, а затем удаляю.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уволить на следующий нажмите кнопку
используйте триггер фокусировки, чтобы отклонить всплывающие окна при следующем щелчке пользователь делает.
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
Примечание - это будет означать, что поповер скроется, как только вы нажмете на него
это быстрое универсальное решение, которое я использую, где вам не нужно знать, какие классы из поповеров заранее. Я не тестировал его очень широко. Также я использую переключатель ниже, поскольку у меня были некоторые проблемы с тем, чтобы скрыть поведение совсем по-другому, чем переключатель.
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(); });
С помощью Bootstrap 3.3.7 я нахожу это решение:
var _popoverLink = $('[data-toggle="popover"]'); _popoverLink.on('click', function(){ _popoverLink.popover('destroy').popover({container: 'body'}); $(this).popover('show'); });
С уважением.
вот решение, которое сработало для меня. В моих скриптах я не передаю vars через атрибут данных в 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 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, не отклоняя его, чтобы пользователь мог получить доступ к popover для таких вещей, как копирование вставки текста.
надеюсь, это поможет кому-то, вот рабочая скрипка. 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//
С помощью ответа "losmescaleros", это прекрасно работает для меня:
$('body').popover({ selector: '[data-toggle="popover"]', trigger: "click" }).on("show.bs.popover", function(e){ // hide all other popovers $("[data-toggle='popover']").not(e.target).popover("destroy"); });
без каких-либо проблем с двойным щелчком мыши.