Twitter Bootstrap: скрыть другие popovers, когда один открыт

Question

Следующий код Bootstrap дает мне «липкое» popover (чтобы пользователи могли взаимодействовать с содержимым внутри popover). Проблема в том, что при открытии popover другие popovers должны быть закрыты (скрыты). Любая идея, как я могу это реализовать?

$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){ 
    $(this).popover('show'); 
    e.preventDefault(); 
}); 

Answer 1

Я был с пьесу о с этим и есть несколько других проблем, касающихся запуска вручную показать/скрыть, чтобы получить это, чтобы играть хорошо. Наведение на самом деле mousein и mouseout, и если вы не добавите дополнительные проверки, вы столкнетесь с проблемами, которые я только что сделал!

и я попытаюсь объяснить, что я сделал.

$(function() { 

    var overPopup = false; 

    $('[rel=popover]').popover({ 
     trigger: 'manual', 
     placement: 'bottom' 

    // replacing hover with mouseover and mouseout 
    }).mouseover(function (e) { 
     // when hovering over an element which has a popover, hide 
     // them all except the current one being hovered upon 
     $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide'); 
     var $popover = $(this); 
     $popover.popover('show'); 

     // set a flag when you move from button to popover 
     // dirty but only way I could think of to prevent 
     // closing the popover when you are navigate across 
     // the white space between the two 
     $popover.data('popover').tip().mouseenter(function() { 
      overPopup = true; 
     }).mouseleave(function() { 
      overPopup = false; 
      $popover.popover('hide'); 
     }); 

    }).mouseout(function (e) { 
     // on mouse out of button, close the related popover 
     // in 200 milliseconds if you're not hovering over the popover 
     var $popover = $(this); 
     setTimeout(function() { 
      if (!overPopup) { 
       $popover.popover('hide'); 
      } 
     }, 200); 
    }); 
}); 

Это работало отлично для меня следующий HTML:

<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a> 
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a> 
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a> 

Надежда, что сортирует вас :)

Answer 2

Я использовал функцию для моего содержания, так что я (в CoffeeScript) :

provideContentForPopover = (element) -> 
    $('.some-selector').not(element).popover 'hide' 
    "some content to be returned" 

$('.some-selector').popover 
    content: -> provideContentForPopover @ 

Answer 3

$('.allThePopovers').click(function() { 
    if ($(this).hasClass('popoverIsOpen')) { 
     $(this).removeClass('popoverIsOpen'); 
    } else { 
     $('.popoverIsOpen').popover('hide'); 
     $('.allThePopovers').removeClass('popoverIsOpen'); 
     $(this).addClass('popoverIsOpen'); 
}); 

Просто замените нажмите с помощью мыши или мыши, чтобы удовлетворить ваши потребности.

Answer 4

Это прекрасно работает, если вы хотите иметь только один поповер открыл сразу, открывается и закрывается нажатием (курсор-позиция не имеет значения):

$('[data-toggle="popover"]').popover({ html: true }).bind("click", function(){ 

    if(!$(this).parent().children("a").first().is(":hover")) 
    $('[data-toggle="popover"]').popover("hide"); 
    else 
    $('[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide"); 

return false; 
}); 

Важно, чтобы каждый поповер имеет индивидуальный родительский , как

<ul> <li> <popover> </li> <li> <popover> </li> </ul> 

HTML:

<li> 
    <a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a> 
</li> 

Answer 5

Я был в состоянии выполнить simil ar, просто скрывая, какой бы ни был popover, не был нажат. Я не уверен, но, похоже, для меня это хорошо. Это означает, что popover отображается на клике и остается живым. Он скрыт, когда нажата другая кнопка.

<script> 
$(function() { 
    $('[rel=popover]').popover({ 
    }).click(function (e) { 
     $('[rel=popover]').not('#friend_' + $(this).attr('id')).popover('hide'); 
    }); 
}); 
</script> 

Answer 6

Там в very simple solution здесь (не мое решение, но прекрасно работает):

$('.link-popover').click(function(){ 
    $('.link-popover').not(this).popover('hide'); //all but this 
}); 

Answer 7

решение Simpiet закрыть все Popovers. Это может быть добавлено к любому событию, когда появится всплывающая такие как щелчок/парение и т.д. Просто, прежде чем показать поповер пасту в следующем коде:

$('.popover').not(this).hide(); //Hides all other popovers 

Это удалит весь Popovers на странице, кроме текущей

Answer 8

более простой способ, чтобы сделать работу:

$('[rel=popover]').popover({ 
    trigger: 'manual', 
    placement: 'bottom' 
}).click(function(e) { 
    $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide'); 
    var $popover = $(this); 
    $popover.popover('toggle'); 
}); 

просто убедитесь, что ваш поповер имеет уникальный идентификатор;] ваш поповер будет вести себя, как это делает по умолчанию, только один поповер сразу.

Answer 9

Использование Bootstrap 3's event callbacks вы можете сделать:

$(document).on('show.bs.popover', function() { 
    $('.popover').not(this).popover('hide'); 
}); 

и в CoffeeScript

$(document).on 'show.bs.popover', -> 
    $('.popover').not(this).popover('hide') 

Answer 10

В соответствии с начальной загрузки документации: Use the focus trigger to dismiss popovers on the next click that the user makes.

<a href="#" 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> 

Answer 11

я обнаружил, что есть некоторые проблемы с динамическим popovers, поэтому здесь 2 soluti Дополнения для статической и динамической Popovers:

первого решения заключается в использовании опции поповера triger:'focus' , но этот вариант не будет работать на некоторых устройствах Android

и вторые один:

$('body').popover({ 
    html: true, 
    //this is for static and dynamic popovers 
    selector: '[data-toggle="popover"]', 
    trigger: 'click', 
    content: function() { 
     //i am using predefined content for popovers. replace with your code or remove at all 
     return $($(this).data('templateselector') + ' .content').html(); 
    }, 
    title: function() { 
     return $($(this).data('templateselector') + ' .title').html(); 
    }, 
    container: 'body' 
}).on('show.bs.popover', function (e) { 
    // i've found that showed popovers has aria-describedby 
    // and $('[data-toggle="popover"]).not(this) not working for dynamic popovers so i came with this: 
    $('[data-toggle="popover"][aria-describedby]').popover('hide'); 
    var trigger = $(e.target); 
    // this is for adding custom class for popover container 
    // just remove it if you dont need 
    trigger.data('bs.popover').tip().addClass($(trigger).data('class')); 
}); 

Answer 12

Используйте этот метод скрыть все другие пополнения, когда вы наведите указатель мыши или щелкните другой элемент для всплытия, чтобы открыть

три четыре

$(document).ready(function(){  
    $('.btnPopover').mouseover(function(){  
    $(this).popover({ 
     html: true, 
     trigger: 'manual' 
    }).popover('show'); 
     $('.btnPopover').not(this).popover('hide'); 
    }); 
}); 

Убедитесь, что вы добавить bootstrap.js и bootstrap.css к вам странице. Надеюсь, это поможет.

Cheers !! Suraj Kumar

Answer 13

Для совместимости вы должны использовать якорный тэг <a>.

Мои Fiddle:https://jsfiddle.net/oneflame/pnb8Ltj3/

Bootstrap Link - http://getbootstrap.com/javascript/#dismiss-on-next-click

<div id="FragmentText1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, est laborum. 
</div> 

$(document).ready(function(){    
    $('a.LexicalEntry').popover({ 
    html : true,  
    content: function() { 
     return getLexicalDefinition($(this).text()); 
    } , 
    trigger: 'focus', 
    placement: 'auto', 
    html: true, 
    container: 'body' 
    }); 
}); 

// *** Injects HTML into raw text. 
// *** Splits the content string using a whitespace regular expression. 
$('#FragmentText1').each(function() { 

    // var words = $.trim($(this).text()).split(/\s+/g); 

    var $this = $(this); 
    $this.html(
     $this.text().trim().replace(/\b(\w+)\b/g, 
      "<a tabindex='0' class='LexicalEntry'' role='button' title='Definition: $1'>$1</a>" 
     )); 

}); 

Answer 14

$('li').popover({ 
    title: 'My title', 
    content: 'My content' 
}) 
.on('show.bs.popover', function() { 
    if (window._bsPopover) { 
     $(window._bsPopover).popover('hide') 
    } 
    window._bsPopover= this; 
}) 
.on('hide.bs.popover', function() { 
    window._bsPopover= null; // see Peter Jacoby's comment 
}); 

Answer 15

Я использовал функцию для моего содержания, и это будет работать должным образом.

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