Javascript 如何使用引导和Drupal覆盖JS文件？

我有一个Drupal8和Bootstrap3的站点。通过将引导主题的Collapse.js文件复制到子主题中，我定制了折叠菜单的行为

我的问题是：

我复制整个文件，有没有办法通过只复制自定义代码来覆盖JS文件

以下是文件bootstrap_子主题_front_office.libraries.yml的内容：

global-styling:
  css:
    theme:
      fonts/font-awesome/css/font-awesome.css: {}
#      bootstrap/dist/css/bootstrap.css: {}
#      css/bootstrap-cosmo.css: {}
      css/style.css: {}
#      css/style-noel.css: {}
#      css/style-nouvel-an.css: {}

bootstrap-scripts:
  js:
    bootstrap/js/affix.js: {}
    bootstrap/js/alert.js: {}
    bootstrap/js/button.js: {}
    bootstrap/js/carousel.js: {}
    bootstrap/js/collapse.js: {}
#    bootstrap/js/dropdown.js: {}
    bootstrap/js/modal.js: {}
    bootstrap/js/tooltip.js: {}
    bootstrap/js/popover.js: {}
    bootstrap/js/scrollspy.js: {}
    bootstrap/js/tab.js: {}
    bootstrap/js/transition.js: {}
    js/tour.js: {}
    js/collapse.js: {}

以下是文件collapse.js的内容：

/* ========================================================================
 * Bootstrap: collapse.js v3.3.7
 * http://getbootstrap.com/javascript/#collapse
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

/* jshint latedef: false */

+function ($) {
  'use strict';

  // COLLAPSE PUBLIC CLASS DEFINITION
  // ================================

  var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')
    this.transitioning = null

    if (this.options.parent) {
      this.$parent = this.getParent()
    } else {
      this.addAriaAndCollapsedClass(this.$element, this.$trigger)
    }

    if (this.options.toggle) this.toggle()
  }

  Collapse.VERSION  = '3.3.7'

  Collapse.TRANSITION_DURATION = 350

  Collapse.DEFAULTS = {
    toggle: true
  }

  Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

  Collapse.prototype.show = function () {
    if (this.transitioning || this.$element.hasClass('in')) return

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

    if (actives && actives.length) {
      activesData = actives.data('bs.collapse')
      if (activesData && activesData.transitioning) return
    }

    var startEvent = $.Event('show.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return

    if (actives && actives.length) {
      Plugin.call(actives, 'hide')
      activesData || actives.data('bs.collapse', null)
    }

    var dimension = this.dimension()

    this.$element
      .removeClass('collapse')
      .addClass('collapsing')[dimension](0)
      .attr('aria-expanded', true)

    this.$trigger
      .removeClass('collapsed')
      .attr('aria-expanded', true)

    this.transitioning = 1

    var complete = function () {
      this.$element
        .removeClass('collapsing')
        .addClass('collapse in')[dimension]('')
      this.transitioning = 0
      this.$element
        .trigger('shown.bs.collapse')
    }

    if (!$.support.transition) return complete.call(this)

    var scrollSize = $.camelCase(['scroll', dimension].join('-'))

    this.$element
      .one('bsTransitionEnd', $.proxy(complete, this))
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
  }

  Collapse.prototype.hide = function () {
    if (this.transitioning || !this.$element.hasClass('in')) return

    var startEvent = $.Event('hide.bs.collapse')
    this.$element.trigger(startEvent)
    if (startEvent.isDefaultPrevented()) return

    var dimension = this.dimension()

    this.$element[dimension](this.$element[dimension]())[0].offsetHeight

    this.$element
      .addClass('collapsing')
      .removeClass('collapse in')
      .attr('aria-expanded', false)

    this.$trigger
      .addClass('collapsed')
      .attr('aria-expanded', false)

    this.transitioning = 1

    var complete = function () {
      this.transitioning = 0
      this.$element
        .removeClass('collapsing')
        .addClass('collapse')
        .trigger('hidden.bs.collapse')
    }

    if (!$.support.transition) return complete.call(this)

    this.$element
      [dimension](0)
      .one('bsTransitionEnd', $.proxy(complete, this))
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
  }

  Collapse.prototype.toggle = function () {
    this[this.$element.hasClass('in') ? 'hide' : 'show']()
  }

  Collapse.prototype.getParent = function () {
    return $(this.options.parent)
      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
      .each($.proxy(function (i, element) {
        var $element = $(element)
        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
      }, this))
      .end()
  }

  Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
    var isOpen = $element.hasClass('in')

    $element.attr('aria-expanded', isOpen)
    $trigger
      .toggleClass('collapsed', !isOpen)
      .attr('aria-expanded', isOpen)
  }

  function getTargetFromTrigger($trigger) {
    var href
    var target = $trigger.attr('data-target')
      || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7

    return $(target)
  }


  // COLLAPSE PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.collapse')
      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

      if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.collapse

  $.fn.collapse             = Plugin
  $.fn.collapse.Constructor = Collapse


  // COLLAPSE NO CONFLICT
  // ====================

  $.fn.collapse.noConflict = function () {
    $.fn.collapse = old
    return this
  }


  // COLLAPSE DATA-API
  // =================

  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
    var $this   = $(this)

    if (!$this.attr('data-target')) e.preventDefault()

    var $target = getTargetFromTrigger($this)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()

    Plugin.call($target, option)
  })

}(jQuery);

我在自定义代码末尾添加了以下代码：

$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('#navbar-collapse-second').collapse('hide');
})

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('#navbar-collapse-first').collapse('hide');
})

$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-first').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});

更新：这是正确的代码

---

我认为您必须将代码包装在document.ready函数中，包装在您自己的js文件中，类似这样：

$(function(){
$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('#navbar-collapse-second').collapse('hide');
})

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('#navbar-collapse-first').collapse('hide');
})

$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-first').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});
});

---

为什么要覆盖默认的js文件？它不干净，想象一下你想更新库的情况。。。。也许您应该创建自己的js文件ex:main.js，并将其包含在yaml配置文件的末尾。。。否？@pbenard我将collapse.js文件从主题复制到子主题。当我更改网站的样式时，我会在子主题中创建一个style.css文件，以重载主题的样式表。对于JS文件，您是应该将文件的所有内容复制到子主题中，还是只添加自定义代码，就像CSS文件一样？初始折叠JS文件包含在子主题中，因此您只需在新文件中编写额外的代码。我想，我不太了解drupal…@pbenard对于drupal，我知道如何声明js。但在我的问题中，第一个代码是原始代码，第二个是我的自定义代码。如果我把这个剂量放在一个新的js文件中，我应该从哪里开始和完成我的文件？如果我坚持这样的代码，它就不起作用了。你有没有尝试将它包装在一个文档就绪的函数中？我这里有答案，它工作得很好，但是对于我的文件浏览，我没有找到解决方案。我更新了我的问题。看看最新的代码，它在我的文件中工作。但有一个问题，当我打开右折叠菜单时，类覆盖是navbar collapse未被删除。右边的菜单很好用。一个主意？最后一个代码似乎有效。它会造成安全问题吗？

$(function(){
$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('#navbar-collapse-second').collapse('hide');
})

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('#navbar-collapse-first').collapse('hide');
})

$('#navbar-collapse-first').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-first').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('show.bs.collapse', function () {
     $('body').addClass('overlay-is-navbar-collapse');
});

$('#navbar-collapse-second').on('hide.bs.collapse', function () {
     $('body').removeClass('overlay-is-navbar-collapse');
});
});