Показать один поповер и скрыть другие поповеры

ни один из ответов, которые я видел ранее, не имел динамических всплывающих окон, так что это то, что я придумал. Как некоторые отметили, есть проблемы с 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");                  
});

без каких-либо проблем с двойным щелчком мыши.

Это самый простой и элегантный способ сделать это:

    $('[data-toggle="popover"]').on('click', function(){
        $('[data-toggle="popover"]').not(this).popover('hide');
    });