- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使侧边栏导航中的按钮(使用 Bootstrap 框架)关闭或折叠单击。
如果您点击下面的链接查看工作模板,您就会明白我的意思 - 左侧栏有一个名为“快捷方式”的按钮,如果单击该按钮,则可以下拉显示其他链接,效果很好......
但是......我希望当再次单击它时它会关闭并恢复到原来的状态......
http://seegatesite.com/bootstrap/simple_sidebar_menu.html
我的想法是,这与下面的 javascript 有关:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$("#menu-toggle-2").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled-2");
$('#menu ul').hide();
});
function initMenu() {
$('#menu ul').hide();
$('#menu ul').children('.current').parent().show();
//$('#menu ul:first').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
下面的行必须能够完成我想做的事情 - 我只是无法弄清楚...感谢所有帮助...
$('#menu li a').click(
最佳答案
nav-pills 只是一个 css 样式,没有 js 操作。
也许你很困惑。
.
也许您可以将 Accordion( http://getbootstrap.com/javascript/#collapse-example-accordion ) 与 nav-pill 样式一起使用,
或者使用 jquery .slideUp() 和 .slideDown() 手动完成。
http://api.jquery.com/slideup/
http://api.jquery.com/slidedown/
.
您提供的代码使用以下部分来折叠/打开
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
关于javascript - 如何使 bootstrap nav-pills 在点击时关闭?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31771708/
我是 Bootstrap 的新手。每次我使用 Bootstrap 创建导航栏时,我都会使用这些元素/类,但所有这些都让我感到困惑: .nav .navbar .navbar-nav 谁能解释一下这些
我正在使用最新的 Angular Bootstrap 版本。当屏幕尺寸缩小到 768 像素以下时,类“nav nav-pills nav-justified”不会堆叠选项卡。 我引用了网站 http:
我有以下代码,div 内有两个 ul 元素,每个元素都有导航、导航丸、导航堆叠类。 All Pending K
我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div,并且工作正常。但是当我试图构建第二个 div 时,第一个 div
似乎 NAV 的潜在性质是抵制要求强制填充字段。对于我们的业务逻辑,必须填充某些字段才能使数据有效。例如,客户记录必须至少有姓名和电话号码。我搜索了很多地方,但没有找到合适的解决方案。那么如何做到这一
Bootstrap Navbars Toggle navigation
我注意到,在 Dynamics NAV 2013 中,一些 TextConst 已开始使用 @@@ 作为语言代码。 例如在 Codeunit 12 中: PurchaseAlreadyExistsEr
如何像图片一样更改引导菜单中打开的链接的颜色。它适用于鼠标悬停和单击后更改为菜单的默认颜色。 我需要像图片一样的东西。 HTML @Html.Action
我正在尝试列出我的 drop-down它工作正常,但在我点击财务报告链接后,我想要 的剩余内容标签向下移动和 drop-down应该在里面打开, .请提供任何帮助,我很感激。 这是我的代码:
我正在使用 Angular4,nav nav-tabs 样式似乎不起作用,我得到的只是无序的垂直列表,如下图 - 我的选项卡组件代码是 - @Component({ selector: 'tabs',
当我尝试构建我的网页时,我的菜单链接底部和我的主导航区域之间有一个非常小的空间(大约 2 像素)。我只使用颜色来查看布局的工作原理,但有人能告诉我为什么会有差异吗?当然他们应该是相同的高度?当前状态可
即使我不是一个新程序员,Html 和 Css 问题对我来说也是无解的。简单阅读文档/规范似乎还不够,因为每个示例都带有一个新的标签和类早午餐来演示其中一个的使用。我的代码基于 Bootsrap 官方演
我喜欢导航标签的外观,所以我想使用它。这是 Web 应用程序现在的样子: 不幸的是,如果我单击其他选项卡(例如“Buscar alojamiento”),事件选项卡不会更改。这是我的代码:
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
工具提示在这种情况下工作正常 Home 但是一旦我将它嵌套在带有 nav 和 nav-side
我有一个应用程序,如果我提取代码并创建一个单独的 html 文件,只用它工作的代码,它就可以工作。 About
我对 Twitter Bootstrap 有疑问。我创建了一个简单的下拉菜单,但是当我在 chrome 检查器中检查代码时,我看到类 nav nav-pills被添加到 元素。 如何删除这些类?
我正在尝试删除我的菜单和后续部分之间的 Bootstrap 空白。我的菜单 HTML 是:
我正在使用 Bootstrap 4 并尝试使导航项与我的导航栏具有相同的高度,这样当我向其添加背景色时,它看起来就像穿过导航栏的条纹。 最初,该元素居中,并在顶部和下方留有空间。我添加了负边距以使其与
我是一名优秀的程序员,十分优秀!