Question

我有一个页面列出了一大堆类别及其相关项目。我想要做的是让这个页面列出类别，如果你点击一个类别，它会展开以显示该类别中的项目。我正在使用bootstrap的内置扩展/折叠功能来实现这一目标。

这很好，除非js没有加载（如果有js错误可能就是这种情况，你的移动连接速度慢，而js还没有下载等）。为了解释这些情况，我希望我的类别链接到独立类别页面。

问题在于，当您点击该类别时，它会扩展项目列表，但会将您带到类别页面，而不是让您保持原状。

知道如何解决这个问题吗？我知道我可以使用return false，但我真的不想开始修改bootstrap.js文件。

谢谢！

<a class="toggle_div" data-toggle="collapse" data-target=".category_56"  href="link.html">
  Category 56
</a>
<div class=" category_56 in">
  Here is the info to expand and collapse
</div>

Answer 1

此属性：

href="link.html"

是你的问题。

如果你需要测试相关div是否已满载，你可以这样做：

$($(this).data('target')).length == 1

这是你的toggle_div锚。

所以可能的解决办法是：

＆＃13;

$('.toggle_div').on('click', function(e) {
  
  if ($($(this).data('target')).length == 1) {
    //
    // if the related div is loaded you can prevent default action
    //
    e.preventDefault();
  } else {
    // goto next page
  }

});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="toggle_div" data-toggle="collapse" data-target=".category_56"  href="link.html">
    Category 56
</a>
<div class=" category_56 in">
    Here is the info to expand and collapse
</div>

＆＃13;

Bootsrap扩展了一个链接，加上另一个页面的链接

1 个答案: