网站导航栏动画在使用JavaScript http请求后停止工作怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (78)

我已经在我自己的静态网站上使用了带有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。

在实现这些功能后,有关为什么动画和叠加菜单可能已停止工作的任何想法?

我开始尝试缩小哪些CSS或JS插件可能负责导航栏bg淡入,我认为它与bootstrap有关。

如果很难说它为什么不起作用,我想知道是否有办法通过将某些东西重新导入到被拉入的分离的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">

The HTML in the navbar:

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

The JavaScript imported just before :

<!-- 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>

I'm commenting out loadNavFooter because I'm in the middle of troubleshooting.

There's a ton of stuff in the bootstrap.js file about scrolling (and I am weakest at JavaScript. I'm not sure if this bit is helpful, but here's an excerpt:

/* ========================================================================
 * 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);
提问于
用户回答回答于

你可以尝试调试它,以查看它是否与代码相关。

另一种可能是一些透明的东西覆盖菜单-我有这样一个问题,一个模式实际上会在解散后变成无形的,并阻塞一些按钮。

扫码关注云+社区

领取腾讯云代金券