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中（意味着它们不需要直接在数据父级之下的一个级别），这是我试图构建的网站的正式要求。

我宁愿不改变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#

下做了一个小提琴

行为应该是：如果打开一个accordeon，那么具有相同data-parent的所有其他accordeon应该关闭。我甚至尝试重新定义函数作为一个整体，但由于控制台显示“非法构造函数错误”，这没有用。

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

提前致谢

Answer 1

我不是在内部工作，而是使用外部API。 Bootstrap Collapse提供事件，泡沫和方法。所以我只是通过查找所有其他折叠并调用他们的show.bs.collapse方法来回复hide事件：

$(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>

在bootstrap.js

1 个答案: