在 bootstrap.js 中覆盖 Collapse.prototype.show 中的 var

Question

我试图在 Collapse 原型 bootstrap.js 中覆盖以下 var：

var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')

有了这个

var actives = this.$parent && this.$parent.find('.panel').find('.in, .collapsing')

这样做的原因是当一个手风琴打开时所有手风琴都不会折叠。 为此，它们通常必须直接位于作为其数据父级的父级 div 下。 当使用 .find 而不是 .children 时，它们可以嵌套在 s 中（意味着它们不需要直接位于 data-parent 的下一级），这是我正在尝试构建的网站的正式要求。

我宁愿不改变 bootstrap.js（或缩小版），而是用 bootstrap.js 之后加载的 custom.js 覆盖它

到目前为止，我的方法是这样的：

// save original Fuction to tmp
var tmp = $.fn.collapse.Constructor.prototype.show;
//set prototype to new function
$.fn.collapse.Constructor.prototype.show = function () {
//set var
var actives = this.$parent && this.$parent.find('.panel').find('.in, .collapsing')
//call saved function
    tmp.call(this);
}

但不幸的是，这不起作用。我在http://www.bootply.com/gSm4qppP3Q#下做了一个小提琴

行为应该是：如果打开了一个手风琴，则所有其他具有相同数据父级的手风琴都应该关闭。 我什至尝试重新定义整个函数，但这并没有成功，因为控制台显示“非法构造函数错误”

所以作为更一般的方法： 如何从不同的 js 脚本更改 bootstrap.js 原型函数中的 var？

提前致谢

Answer 1

我不会使用内部组件，而是使用外部 API。 Bootstrap Collapse 提供事件、冒泡和方法。所以我只需通过查找所有 other 折叠并调用他们的hide 方法来响应show.bs.collapse 事件：

$(document).on("show.bs.collapse", function(e) {
    $(".collapse").not(e.target).collapse("hide");
});

当然，如果您想更窄地定位目标，请在有问题的类别中添加一个类并使用它来代替（或补充）上面的.collapse。

例子：

$(document).on("show.bs.collapse", function(e) {
  // Get the data-parent from the link for this collapse.
  // It's a bit awkward, because e.target is the div, not
  // the link.
  var parent = $("[data-toggle=collapse][href='#" + e.target.id + "']").attr("data-parent");
  // Collapse all others with the same data-parent and hide them; again a bit awkward because we have
  // to find the links, then find what they toggle
  var targets = $("[data-toggle=collapse][data-parent='" + parent + "']").map(function() {
    return $(this).attr("href");
  }).get().join(",");
  console.log(targets);
  $(targets).not(e.target).collapse("hide");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#parentA" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    Button with data-target
  </button>
  <div class="collapse" id="collapse1">
    <div class="well">
      I'm <code>#collapse1</code>, my data-parent is <code>#parentA</code>
    </div>
  </div>
</div>

<div>
  <a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#parentA" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
    Button with data-target
  </button>
  <div class="collapse" id="collapse2">
    <div class="well">
      I'm <code>#collapse2</code>, my data-parent is <code>#parentA</code>
    </div>
  </div>
</div>

<div>
  <a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#parentB" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
    Button with data-target
  </button>
  <div class="collapse" id="collapse3">
    <div class="well">
      I'm <code>#collapse3</code>, my data-parent is <code>#parentB</code>
    </div>
  </div>
</div>

<div>
  <a class="btn btn-primary" role="button" data-toggle="collapse" data-parent="#parentB" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
    Button with data-target
  </button>
  <div class="collapse" id="collapse4">
    <div class="well">
      I'm <code>#collapse4</code>, my data-parent is <code>#parentB</code>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>