个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我用 jquery 和 bootstrap 创建了一个网页，但是如果有导航栏我的 Accordion 就不能工作，如果我删除导航栏它可以正常工作。
更新: 即使我删除了导航栏，它也无法正常工作。
这就是我的意思:
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">IBSApps</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" id="dashlink"><span class="glyphicon glyphicon-home"></span>Dashboard</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="profiling"><a href="#" class="dropdown-toggle" data-toggle="dropdown" id="proflink"><span
class="glyphicon glyphicon-user"></span> Suryo Sapoetro <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Profile <span class="small text-info">beta</span></a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings <span class="small text-info">beta</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span>Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<div class="container"></div>
<div class="container">
<div id="container" class="row">
<div class="col-lg-8">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseone">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsethree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row"></div>
</div>
</div>
</div>
<!-- /.container -->
</body>
对不起我的英语。提前致谢。
最佳答案
那是因为导航有一个position:fixed。添加到 div #accordion{ margin-top:60px;}。这是定位的修复。你能在控制台中检查你有什么 jQuery 错误并发布吗？
关于jquery - Bootstrap 3 : Collapse Accordion Not Working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20543164/
25
4
0
我有这个左侧站点菜单: Typography Name 1
我有两个问题: 是否有合理的解释，为什么会这样？ 是否有针对这种情况的 CSS 解决方法？ 谢谢! table { border-collapse: collapse; pad
我想知道为什么我的类“panel-collapse”“collapse”不起作用。 我刚刚将文件上传到我的服务器上，当我单击链接区域时，它们不起作用(它们不会放下隐藏内容)。但是，它们在我的 Drea
在这种情况下，我完全感到困惑。当我使用 border-collapse: collapse; 从 1px (#1) 到 大 值 (#2) 并回到 1px (#3)，我有视觉缺陷。 #1 和#3 相同，
我有两个表，想要使用 Javascript 同步它们的列宽。只要我不为表格设置 CSS 属性 border-collapse:collapse;，它就能在 Google Chrome 中按预期工作。
我正在前端使用 Bootstrap 编写一个个人提要阅读器，并想添加一个“折叠/全部展开”按钮。 这是我的第一个 JavaScript/JQuery 代码，所以除了在 Firefox Develope
我正在使用以下模块:https://roszpun.github.io/vue-collapse/#/ 我似乎无法弄清楚如何正确地将类添加到包装元素，因为我首先考虑在 onStatusChange 上
在我的代码中，您将看到一个按钮和一个可折叠元素。如果单击该按钮，页面将滚动到可折叠状态。 用户点击按钮后是否可以打开折叠？我考虑过使用视口(viewport)，但每次在视口(viewport)中时，折
我有一个 Collapsible-set(有 5-10 个可折叠)并使用此代码查找已打开的: $("#mySet").on("collapsibleexpand", function (e) {
我正在使用 jQuery Collapse在通过 Ajax 插入的元素上。 当我应用下面的行时，它删除了 collapse 类。我需要保留该类，以便在需要关闭 Ajax 内容时调用 collapse(
我正在尝试使用 隐藏表格中的列和 visibility:collapse如此处所述: Is it possible to hide / show table columns by changing
我在格式化 nav navbar-nav 无序列表中的列表项时遇到问题。当页面为全尺寸时，我想保留格式不变。但是，我想在页面缩小时格式化/自定义列表项，并且列表项“消失”并且仅在用户单击切换按钮后“重
出于某种原因，即使我第一次执行完全相同的操作，我也无法再次触发显示。 基本上，我有一个表单，用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此，我在 Javascript 中使用
我使用了 jsfiddle 68RXP 中的示例collapse-group 创建一个可扩展的 div: HTML: Heading Lorem ipsum View
我有以下问题:当我翻译表格中的标题单元格并且表格设置为 border-collapse:collapse 时，单元格将移动但不会移动它们的边框。我创建了一个测试: 标记:
我是 CSS 和 Bootstrap 3.0 的新手。下面是我可以在很多地方找到的代码，现在我可以毫无问题地编写它。但我真的不知道幕后情况如何。 Company
我有一个包含多行的表格，例如: Line1 Line2 Line3 现在，在 javascript(基于单选输入字段)中，我想通过添加 visibility:collapse 来
我有一个网页，我在其中尝试使所有浏览器的边框正确。参见 http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.
我正在尝试使用 javascript 来创建 Bootstrap 我只需要更新 javascript 文件，而不是在网站的各个页面上管理导航栏。 这是横幅的代码: document.write( "
给定以下 HTML 页面，表格顶部出现一条水平线，其中第一行将包含第二和第三个单元格(如果已定义)。 Test Page table { margin:10px 0 10px 0;
我是一名优秀的程序员,十分优秀！