我刚刚开始为我即将开展的项目使用 Twitter Bootstrap API。主导航包含 3 个主要元素:
在移动设备上查看网站时,我使用折叠插件折叠网站导航和搜索表单。移动视图有 2 个按钮,单击这些按钮可打开/关闭搜索表单或主导航。
但是,如果我关闭搜索表单,然后将浏览器大小调整为桌面视图,搜索表单仍然隐藏在此视图中吗?
我读过有关使用可见移动等类的信息,但这些似乎与折叠插件发生冲突。我还意识到我可以编写自己的 CSS hack 来解决这个问题,但我想我会问是否有更简单的解决方案。
Bootstrap 有显示、显示、隐藏和隐藏的事件,所以我想也许我可以编写一些自定义 JS,在每个特定的设备视图中显示或隐藏这些项目。但是我不知道如何检测我当时正在使用哪个设备。
想法?
如果您想知道自己所处的环境,请尝试使用 Bootstrap 自己的 CSS 类。创建一个元素,将其添加到页面,应用其辅助类并检查它是否隐藏以确定这是否是当前环境。下面的函数就是这样做的:
引导程序4
function findBootstrapEnvironment() {
let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
let el = document.createElement('div');
document.body.appendChild(el);
let curEnv = envs.shift();
for (let env of envs.reverse()) {
el.classList.add(`d-${env}-none`);
if (window.getComputedStyle(el).display === 'none') {
curEnv = env;
break;
}
}
document.body.removeChild(el);
return curEnv;
}
引导程序3
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
引导程序2
function findBootstrapEnvironment() {
var envs = ['phone', 'tablet', 'desktop'];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)