0

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

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

现场直播在这里

请注意，目前只有“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');

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

4

1 回答 1

1

只需使用此代码：

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

您可以使用所需的变量更改.nav a和.navbar-to-collapse或通过在每个变量之间使用 < , > 添加更多变量。

更多解释：

  1. .nav a是您通过单击定位的变量，在此示例中，它是导航类下的链接，您可以将其修改为使用 ID 而不是类定位链接

    $('#nav a')

  2. .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>

希望对你有帮助

于 2013-10-01T00:09:52.960 回答