引导 3 弹出框:悬停时显示,单击时显示,又名.固定弹出框
Bootstrap 3 Popover: display on hover AND on click, aka. Pin a Popover
使用悬停触发器显示弹出框可以正常工作。
使用单击触发器显示弹出框可以正常工作。
现在,我如何使弹出框在触发图像悬停时显示,但是如果用户单击图像,请取消悬停并启动单击切换?换句话说,悬停显示弹出框并单击"固定"弹出框。
HTML是非常标准的:
<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>
而弹出的初始化,更无聊:
$(function () {
$("[rel=popover]").popover();
});
从我目前所看到的情况来看,解决方案很可能是一组非常复杂的popover('show')
、popover('hide')
和popover('toggle')
调用,但我的javascript/jQuery-foo不能胜任这项任务。
编辑:
以@hajpoj提供的代码为基础,我添加了一个函数来监听hidden.bs.popover
事件,以尝试在触发点击事件后重新启用mouseenter和mouseleave事件,但是虽然它确实使"悬停"再次工作,但它会杀死点击......
var $btn2 = $('#btn2');
var enterShow = function() {
$btn2.popover('show');
};
var exitHide = function() {
$btn2.popover('hide');
}
$btn2.popover({trigger: 'manual'})
.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
.one('click', function() {
$btn2.off('mouseenter', enterShow)
.off('mouseleave', exitHide)
.on('click', function() {
$btn2.popover('toggle');
});
});
$('#btn2').on('hidden.bs.popover', function () {
$btn2.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
});
编辑:
这是根据您的评论更新的解决方案。它不会停留在"单击"状态,而是返回到悬停状态。
JSFIDDLE: http://jsfiddle.net/hajpoj/JJQS9/15/
.html:
<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
.js:
var $btn2 = $('#btn2');
$btn2.data('state', 'hover');
var enterShow = function () {
if ($btn2.data('state') === 'hover') {
$btn2.popover('show');
}
};
var exitHide = function () {
if ($btn2.data('state') === 'hover') {
$btn2.popover('hide');
}
};
var clickToggle = function () {
if ($btn2.data('state') === 'hover') {
$btn2.data('state', 'pinned');
} else {
$btn2.data('state', 'hover')
$btn.popover('hover');
}
};
$btn2.popover({trigger: 'manual'})
.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
.on('click', clickToggle);
老:
我相信这就是你要找的:
http://jsfiddle.net/JJQS9/1/
.html:
<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
.js:
var $btn2 = $('#btn2');
var enterShow = function() {
$btn2.popover('show');
};
var exitHide = function() {
$btn2.popover('hide');
}
$btn2.popover({trigger: 'manual'})
.on('mouseenter', enterShow)
.on('mouseleave', exitHide)
.one('click', function() {
$btn2.off('mouseenter', enterShow)
.off('mouseleave', exitHide)
.on('click', function() {
$btn2.popover('toggle');
});
});
基本上,您手动弹出打开/关闭mouseenter
和mouseleave
事件的弹出框,但是一旦有人第一次单击弹出框,您就会删除这些事件处理程序,并在切换弹出框的click
事件上添加新处理程序。
编辑:另一种 JS 代码。代码更简单,但当你使用它时,有一个小的视觉闪光点:http://jsfiddle.net/hajpoj/r3Ckt/1/
var $btn2 = $('#btn2');
$btn2.popover({trigger: 'hover'})
.one('click', function() {
$btn2.popover('destroy')
.popover({ trigger: 'click'})
.popover('show');
});
,将hover
添加到data-trigger
,如下所示:
<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>
这是一个混合弹出框/工具提示,可以为您提供您正在寻找的两个选项的功能,在单击和悬停时切换):
混合弹出框/工具提示小提琴
.HTML:
<button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What's hidden?</button>
.JS:
var $tip1 = $('#tip1');
$tip1.tooltip({trigger: 'hover'})
.on('click', function() {
$tip1.tooltip('toggle');
});
以下是我使用 Bootstrap 和 JQuery 完成悬停/固定功能的方法:
$(function () {
var clicked = false;
var onLeave = function() {
if (!clicked) { $(this).popover('hide'); }
};
var onEnter = function () {
if (!clicked) { $(this).popover('show'); }
};
var clickToggle = function() {
if (clicked) { $(this).popover('hide'); }
clicked = !clicked;
}
$('.popover-div-class').popover({ trigger: "manual"})
.on('mouseenter', onEnter)
.on('mouseleave', onLeave)
.on('click', clickToggle);
});
我不确定它是否适用于所有情况,但它适用于我的场景。向@hajpoj大喊大叫,@Trevor灵感。
JSFiddle:https://jsfiddle.net/5m2ob3yf/(尚不工作,但你可以得到要点)。
- Chrome调试器中显示的“类名”基于什么?能控制吗?
- 我正在尝试创建一个可以在Internet Explorer(Windows 10,又名Edge)中工作的html语音到文
- 通过 JavaScript 访问 CSS 自定义属性(又名 CSS 变量)
- 乒乓球又名嘶嘶声测试
- 如何显示上传带有不需要的扩展名的文件的错误
- 优雅地降级有机选项卡以在IE9高安全性(又名无js)中工作的简单方法
- 按类名而不是 ById 显示/隐藏可见性
- 如何修复此代码以显示 10 秒并一次又一次地永远隐藏 10 秒
- 引导 3 弹出框:悬停时显示,单击时显示,又名.固定弹出框
- 广告拦截器检测又名广告拦截加
- doctorjs(又名jsctags)不适用于vim+tagbar
- Ember部分模型(又名引导程序资源)
- Jquery注意,右顶部位置,显示新消息更高(又名后进先出)
- 那些自动执行的匿名函数(又名IIFE)实现有什么区别?
- 显示类名与父函数jquery
- Jquery显示变量名而不是值
- 哪些对象在JavaScript有一个.length属性?(又名为什么下划线_.每个都把我的函数对象当作数组?)
- 在QML中,用Pd或Max动态连接图中的节点(又名“修补”).接口)
- 显示类名
- ui路由器解析功能中的处理错误?(又名$stateChangeError)将数据传递到错误状态