我有一个使用标准Twitter Bootstrap javascript组件的下拉菜单触发的弹出窗口。点击由下拉触发的弹出窗口时,如何防止下拉菜单隐藏?
你能帮我防止用户点击popover时关闭下拉菜单吗?
这里有一个小提琴:http://jsfiddle.net/EAdW5/
UX:
点击下拉菜单按钮
===>
下拉菜单显示点击酥料饼的下拉项
===>
酥料饼显示点击酥料饼
===>
下拉菜单一个d popover消失了! O no!我怎样才能防止这一点?
我想要酥料饼和下拉保持,直到(一)外单击下拉列表,并酥料饼,或(b)故意隐藏(点击酥料饼的形式提交后,例如)。
HTML:
<div class="btn-group">
<button id="btnId" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Regular Link 1</a></li>
<li><a href="#">Regular Link 2</a></li>
<li><a href="#" id="popoverId" class="popoverThis">Popover Link</a></li>
</ul>
</div>
<div class="hide" id="popover-custom-content">
<div class="form-inline">
<div class="control-group">
<textarea name="issue"></textarea>
</div>
<div class="control-group">
<button id="btnPopoverSubmitId" class="btn">Add</button>
<span class="close close-inline">Cancel</span>
</div>
</div>
</div>
JS:
$('#popoverId').popover({
html:true,
placement: 'right',
title: "Popover Title",
template: '<div id="popover-custom-content" class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function() { return $('#popover-custom-content').html(); }
});