2016-10-25 3 views
0

У меня есть два бутстрапа popovers, и они должны иметь возможность открыть боковую панель.Функция Bootstrap Popover

Также, пожалуйста, найти соответствующий код в JSFiddle https://jsfiddle.net/bob_js/eLLaacju/

Я хотел достичь ниже вопроса: поповер должен открыть на данных-триггера = «парить» и остаться, как это имеет содержание, в котором, если мы можем нажмите «Текст» (нажмите «Мне»), он должен открыть боковую панель. data-trigger = 'focus' тоже не помогает.

Не могли бы вы помочь мне, ниже приведен соответствующий код.

HTML

<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-a" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 


<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-b" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 

JQuery:

$(function() { 
    $("#popover-a").popover({ 
    html: true, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }); 
    $("#popover-b").popover({ 
    html: true, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }); 
}) 

CSS:

.hidden{ 
display: none; 
} 
+0

вы можете поставить в jsfiddle? показать текущий результат –

+0

https://jsfiddle.net/bob_js/eLLaacju/ –

+0

@DonaldWu не могли бы вы проверить его один раз. В скрипке открывается всплывающее окно, когда оно зависает, но я хочу, чтобы он остался и хочу щелкнуть «Click Me», который откроет боковую панель, а также закрыть его, когда «Click Me» будет закрыт. –

ответ

0

Код ниже помогает мне:

$(function() { 
    $("#popover-a").popover({ 
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000}, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }); 
    $("#popover-b").popover({ 
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000}, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }); 
})