Bootstrap关闭响应菜单"点击"
use*_*259 84 html javascript css twitter-bootstrap
在"产品"上单击我向上滑动一个白色div(如附图所示).在响应式(移动设备和平板电脑)时,我想自动关闭响应式导航栏并仅显示白色条.
我试过了:
$('.btn-navbar').click();
还尝试过:
$('.nav-collapse').toggle();
它确实有效.然而,在桌面大小的情况下,它也会被调用并对菜单做一些时髦的事情,它会缩短一秒钟.
有任何想法吗？
Jak*_*lor 132
您不必添加任何额外的javascript到bootstraps折叠选项中已包含的内容.而只需在菜单列表项上包含数据切换和数据目标选择器,就像使用导航栏切换按钮一样.因此,对于您的"产品"菜单项,它看起来像这样
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
然后,您需要为每个菜单项重复数据切换和数据目标选择器
编辑!!! 为了解决溢出问题和闪烁这个修复我正在添加一些代码,将解决这个问题,但仍然没有任何额外的JavaScript.这是新代码:
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
这是工作http://jsfiddle.net/jaketaylor/84mqazgq/
这将使您的切换和目标选择器特定于屏幕尺寸,并消除较大菜单上的毛刺.如果有人仍然遇到毛刺问题,请告诉我,我会找到解决办法.谢谢
编辑:在bootstrap v4.1.3中,我无法使用可见/隐藏类.而不是hidden-xs使用d-none d-sm-block而不是visible-xs使用d-block d-sm-none.
- 导航未显示为"响应"菜单时会导致闪烁和奇怪的东西. (14认同)
- 这是正确的实现.不需要自定义jQuery. (5认同)
- 您可以将其添加到父级“ul”或“div”标签，而不是向每个 li 元素添加“data-toggle”和“data-target”属性。 (2认同)
mol*_*lwe 99
我有它与动画一起工作!
html菜单:
<div id="nav-main" class="nav-collapse collapse">
<ul class="nav">
<li>
<a href='#somewhere'>Somewhere</a>
</li>
</ul>
</div>
将导航中所有元素的点击事件绑定到折叠菜单(Bootstrap折叠插件):
$(function(){
var navMain = $("#nav-main");
navMain.on("click", "a", null, function () {
navMain.collapse('hide');
});
});
编辑 为了使它更通用,我们可以使用以下代码片段
$(function(){
var navMain = $(".navbar-collapse"); // avoid dependency on #id
// "a:not([data-toggle])" - to avoid issues caused
// when you have dropdown inside navbar
navMain.on("click", "a:not([data-toggle])", null, function () {
navMain.collapse('hide');
});
});
- 如果不是所有的'a`元素:你只需要调用`$("#nav-main").collapse('hide');` (3认同)
Hon*_*oni 40
我想你们都是工程师......
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();
});
编辑:要处理子菜单,请确保其切换锚点上有下拉切换类.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () {
$('.navbar-toggle:visible').click();
});
});
编辑2:添加对手机触摸的支持.
$(function () {
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
$('.navbar-toggle:visible').click();
});
});
- 应该是接受的答案.其他人在非响应显示器上过度设计和闪烁. (3认同)
- 这可能是已接受的答案,但它没有考虑子菜单,实际上打破了它们.一些其他"过度设计"的解决方案确实考虑到了这一点,尽管它们存在缺陷.以下添加将解决此问题:$(function(){$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function(){$('.navbar-toggle: visible').click();});}); (3认同)
Luk*_*man 36
我真的很喜欢杰克泰勒的想法,没有额外的JavaScript,并利用Bootstrap的崩溃切换.我发现当菜单未处于折叠模式时,通过data-target略微修改选择器以包含in类,可以修复存在的"闪烁"问题.所以它看起来像这样:
<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.in">Products</a></li>
我没有用嵌套下拉菜单/菜单测试它,所以YMMV.
- 这对我来说也是最好的实现. (3认同)
刚刚完成,在Bootstrap 4.0.0-beta中使用.show为我工作...
<li>
<a href="#Products" data-toggle="collapse" data-target=".navbar-collapse.show">Products</a>
</li>
我假设您有这样一行定义导航区域，基于 Bootstrap 示例和所有
<div class="nav-collapse collapse" >
只需添加属性，就像在 MENU 按钮上一样
<div class="nav-collapse collapse" data-toggle="collapse" data-target=".nav-collapse">
我也加入了<body>，成功了。不能说我已经描述了它或任何东西，但对我来说似乎是一种享受......直到你点击 UI 的一个随机位置来打开菜单，所以不是那么好。
DK
| 归档时间： |
|
| 查看次数： |
160877 次 |
| 最近记录： |