我正在客户的静态网站上工作。这主要不是我为他所做的，但是我在那方面确实有一些技巧，所以我正在提供帮助。非常感谢您对我的耐心配合。我在自己的静态网站上使用了带有jQuery的HTTP请求，以在我所有页面上提取nav.html和footer.html内容，因此我不需要每个文件中都有重复的HTML并简化任何更新。在我的网站上，
$(document).ready(function() {
loadContent();
});
function loadContent(){
$('nav').load('nav.html');
$('footer').load('footer.html');
}
在他身上，我需要和它一起
$(document).ready(function() {
loadContent();
});
function loadContent(){
$('header').load('nav.html');
$('footer').load('footer.html');
}
因为他在导航栏中的导航标签周围有不止一套导航控件。我可以像在自己的网站上一样很好地加载内容，保留文本的颜色和布局，并且页脚有零问题。但是，导航栏中的某些内容停止工作。尽管导航栏本身是静态的，但是当您滚动到页面顶部时，它具有透明的背景。向下滚动时，彩色背景会淡入淡出，并在导航链接后面带有漂亮的动画，因此主要内容不会遮挡导航链接。此外，在任何窗口大小下，总会有汉堡包菜单打开以列表形式显示导航链接的全屏覆盖。
当我开始使用.load功能来引入此内容时，导航栏bg动画以及能够单击汉堡包菜单以打开可选的叠加菜单都无法正常工作。
在他的HTML文件中，所有CSS均已导入中，而JavaScript文件均在之前引入。我上面的文档准备功能被导入为许多其他JS文件的倒数第二个。我们正在使用jQuery 2.1.3。
一旦实现这些功能，关于为什么动画和覆盖菜单可能会停止工作的任何想法？
我开始尝试缩小可能导致navbar bg淡入的CSS或JS插件的范围，我认为这与引导程序有关。
如果很难说出为什么它不起作用，我想知道是否有办法通过将某些内容重新导入到正在拉入的单独的nav.html文件中来“强制”这些事情起作用。试图将某些JS文件重新加载到该HTML文件中，但控制台表示它是“垃圾”。除此之外，我还没有遇到其他对我有帮助的控制台错误。
导入到头部的CSS：
<!-- Plugins -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/ionicons.min.css" rel="stylesheet">
<link href="assets/css/simpletextrotator.css" rel="stylesheet">
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<link href="assets/css/owl.carousel.css" rel="stylesheet">
<link href="assets/css/superslides.css" rel="stylesheet">
<link href="assets/css/vertical.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<!-- Template core CSS -->
<link href="assets/css/style.css" rel="stylesheet">
导航栏中的HTML：
<header>
<!-- OVERLAY MENU -->
<div id="overlay-menu" class="overlay-menu">
<a href="#" id="overlay-menu-hide" class="navigation-hide"><i class="ion-close-round"></i></a>
<div class="overlay-menu-inner">
<nav class="overlay-menu-nav">
<ul id="nav">
<span class="font-alt">Navigation:</span>
<li><a href="index.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="concerts.html">Concerts</a></li>
<li><a href="sheetmusic.html">Sheet Music</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="contact.html">Contact</a></li>
<br>
<span class="font-alt">Resources:</span>
<li><a href="faq.html">FAQ</a></li>
<li><a href="downloads/ChristopherTin_EPK.zip">EPK and Photos</a></li>
<li><a href="pressarchives.html">Press Archives</a></li>
<li><a href="credits.html">Full Credits</a></li>
</ul>
</nav>
</div>
<div class="overlay-navigation-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p class="copyright font-alt m-b-0"></p>
</div>
</div>
</div>
</div>
</div>
<!-- /OVERLAY MENU -->
<!-- NAVIGATION -->
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top navbar-dark">
<div class="container">
<!-- SOCIAL ICONS -->
<div class="navbar-header">
<a class="navbar-brand" href="http://facebook.com/christophertinmusic" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="navbar-brand" href="http://twitter.com/christophertin" target="_blank">
<i class="ion-social-twitter"></i>
</a>
<a class="navbar-brand" href="http://instagram.com/christophertinmusic" target="_blank">
<i class="fa fa-instagram"></i>
</a>
<a class="navbar-brand" href="http://www.youtube.com/user/tinworks" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="navbar-brand" href="http://soundcloud.com/christophertin" target="_blank">
<i class="fa fa-soundcloud"></i>
</a>
</div>
<!-- /SOCIAL ICONS -->
<!-- ICONS NAVBAR -->
<ul id="icons-navbar" class="nav navbar-nav navbar-right">
<li>
<a href="#" id="toggle-menu" class="show-overlay" title="Menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</li>
</ul>
<!-- /ICONS NAVBAR -->
<!-- MAIN PAGES -->
<ul class="extra-navbar nav navbar-nav navbar-right navbar-dark">
<li><a href="index.html" title="Home">News</a></li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="music.html" title="Music">Music</a></li>
<li><a href="concerts.html" title="Concerts">Concerts</a></li>
<li><a href="sheetmusic.html">Sheet Music</a></li>
<li><a href="store.html" title="Store">Store</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<!-- /MAIN PAGES -->
</div>
</nav>
<!-- /NAVIGATION -->
</header>
之前导入的JavaScript：
<!-- Javascript files -->
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.superslides.min.js"></script>
<script src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.simple-text-rotator.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/packery-mode.pkgd.min.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jqBootstrapValidation.js"></script>
<script src="assets/js/jquery.fitvids.js"></script>
<script src="assets/js/jquery.parallax-1.1.3.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=true"></script>
<script src="assets/js/gmaps.js"></script>
<script src="assets/js/contact.js"></script>
<!--<script src="assets/js/loadNavFooter.js"></script> -->
<script src="assets/js/custom.js"></script>
我正在注释loadNavFooter，因为我正在进行故障排除。
bootstrap.js文件中有很多关于滚动的内容（我最不擅长JavaScript。我不确定这是否有帮助，但这是节选：
/* ========================================================================
* Bootstrap: modal.js v3.3.6
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// MODAL CLASS DEFINITION
// ======================
var Modal = function (element, options) {
this.options = options
this.$body = $(document.body)
this.$element = $(element)
this.$dialog = this.$element.find('.modal-dialog')
this.$backdrop = null
this.isShown = null
this.originalBodyPad = null
this.scrollbarWidth = 0
this.ignoreBackdropClick = false
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
}
Modal.VERSION = '3.3.6'
Modal.TRANSITION_DURATION = 300
Modal.BACKDROP_TRANSITION_DURATION = 150
Modal.DEFAULTS = {
backdrop: true,
keyboard: true,
show: true
}
Modal.prototype.toggle = function (_relatedTarget) {
return this.isShown ? this.hide() : this.show(_relatedTarget)
}
Modal.prototype.show = function (_relatedTarget) {
var that = this
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
this.isShown = true
this.checkScrollbar()
this.setScrollbar()
this.$body.addClass('modal-open')
this.escape()
this.resize()
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
this.$dialog.on('mousedown.dismiss.bs.modal', function () {
that.$element.one('mouseup.dismiss.bs.modal', function (e) {
if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true
})
})
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(that.$body) // don't move modals dom position
}
that.$element
.show()
.scrollTop(0)
that.adjustDialog()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
that.enforceFocus()
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$dialog // wait for modal to slide in
.one('bsTransitionEnd', function () {
that.$element.trigger('focus').trigger(e)
})
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
that.$element.trigger('focus').trigger(e)
})
}
Modal.prototype.hide = function (e) {
if (e) e.preventDefault()
e = $.Event('hide.bs.modal')
this.$element.trigger(e)
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
this.escape()
this.resize()
$(document).off('focusin.bs.modal')
this.$element
.removeClass('in')
.off('click.dismiss.bs.modal')
.off('mouseup.dismiss.bs.modal')
this.$dialog.off('mousedown.dismiss.bs.modal')
$.support.transition && this.$element.hasClass('fade') ?
this.$element
.one('bsTransitionEnd', $.proxy(this.hideModal, this))
.emulateTransitionEnd(Modal.TRANSITION_DURATION) :
this.hideModal()
}
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) {
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide()
}, this))
} else if (!this.isShown) {
this.$element.off('keydown.dismiss.bs.modal')
}
}
Modal.prototype.resize = function () {
if (this.isShown) {
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this))
} else {
$(window).off('resize.bs.modal')
}
}
Modal.prototype.hideModal = function () {
var that = this
this.$element.hide()
this.backdrop(function () {
that.$body.removeClass('modal-open')
that.resetAdjustments()
that.resetScrollbar()
that.$element.trigger('hidden.bs.modal')
})
}
Modal.prototype.removeBackdrop = function () {
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
Modal.prototype.backdrop = function (callback) {
var that = this
var animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) {
if (this.ignoreBackdropClick) {
this.ignoreBackdropClick = false
return
}
if (e.target !== e.currentTarget) return
this.options.backdrop == 'static'
? this.$element[0].focus()
: this.hide()
}, this))
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
if (!callback) return
doAnimate ?
this.$backdrop
.one('bsTransitionEnd', callback)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
var callbackRemove = function () {
that.removeBackdrop()
callback && callback()
}
$.support.transition && this.$element.hasClass('fade') ?
this.$backdrop
.one('bsTransitionEnd', callbackRemove)
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) :
callbackRemove()
} else if (callback) {
callback()
}
}
// these following methods are used to handle overflowing modals
Modal.prototype.handleUpdate = function () {
this.adjustDialog()
}
Modal.prototype.adjustDialog = function () {
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight
this.$element.css({
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})
}
Modal.prototype.resetAdjustments = function () {
this.$element.css({
paddingLeft: '',
paddingRight: ''
})
}
Modal.prototype.checkScrollbar = function () {
var fullWindowWidth = window.innerWidth
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
var documentElementRect = document.documentElement.getBoundingClientRect()
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
}
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
this.scrollbarWidth = this.measureScrollbar()
}
Modal.prototype.setScrollbar = function () {
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
this.originalBodyPad = document.body.style.paddingRight || ''
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}
Modal.prototype.resetScrollbar = function () {
this.$body.css('padding-right', this.originalBodyPad)
}
Modal.prototype.measureScrollbar = function () { // thx walsh
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
this.$body.append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
this.$body[0].removeChild(scrollDiv)
return scrollbarWidth
}
// MODAL PLUGIN DEFINITION
// =======================
function Plugin(option, _relatedTarget) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.modal')
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option](_relatedTarget)
else if (options.show) data.show(_relatedTarget)
})
}
var old = $.fn.modal
$.fn.modal = Plugin
$.fn.modal.Constructor = Modal
// MODAL NO CONFLICT
// =================
$.fn.modal.noConflict = function () {
$.fn.modal = old
return this
}
// MODAL DATA-API
// ==============
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
var href = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
if ($this.is('a')) e.preventDefault()
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
Plugin.call($target, option, this)
})
}(jQuery);
答案 0 :(得分：0)
您可以尝试对其进行调试，以查看其是否与代码相关。
另一种可能性是菜单上透明的东西-我遇到了这样的问题：解雇后的模态实际上将变得不可见并阻塞一些按钮。
除此以外，没有代码可看。