Question

我正在为菜单创建包含折叠内容的单页设计。我没有为这个崩溃的内容使用任何引导菜单 - 我只是使用ahref来显示该ahref元素的内容。

问题是它一直显示我刚刚点击的最近链接中的内容。

实际网站为here

请注意，目前只有“Webdesign”和“Profil”才能正常工作。

我试图整合的脚本看起来像这样：

<script> 
$('a#home-box-blog [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});

$('a#home-box-cultivatr [data-toggle=collapse]').on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');
});
</script>

编辑：也尝试了这个：

$("[data-toggle^='collapse']").on('click', function (e) {
$('.collapse').not($(this).data("target")).collapse('hide');

如果你能弄清楚我做错了什么来实现这一目标。

Answer 1

只需使用此代码：

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

您可以使用所需的变量更改 .nav a 和 .navbar-to-collapse ，或者只需使用＆lt; ，＆gt;每个变量之间。

更多解释：

.nav a 是您通过点击定位的变量，在此示例中，它是导航类下的链接，您可以修改它以使用ID而不是类
来定位链接
```
$('#nav a')
```
.navbar-to-collapse 是 data-target = “。navbar-to-collapse”的值您可以将其修改为您使用的数据目标。

所以一个完整的例子（用于说明）应该是这样的：

<header><!-- /Navigation-Bar Container-->
<nav class="navbar navbar-default 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=".navbar-to-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="icon-menu"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-to-collapse">
        <ul class="nav">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
  </div><!-- /.navbar-collapse -->
</div>
</nav>

并使用脚本：

<script>
$('.nav a').click(function () { $(".navbar-to-collapse").collapse("hide") });
</script>

希望它会帮助你

单击另一个切换的新链接时，Bootstrap折叠div未关闭

1 个答案: