Question

我在页脚上使用了2个脚本。当单独声明时，每个脚本都能正常工作，但如果我宣布第二个脚本。另一个不起作用。

以下是单独声明并与其他脚本一起使用时的代码。这有自己的js文件。

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() > 20 ) {
        if( !fixed ) {
            fixed = true;
            $('.navbar-fixed-top').addClass('scroll');

        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.navbar-fixed-top').removeClass('scroll');

        }
    }
});

/*
 * Smooth Scroll
 */


$(function() {

        function filterPath(string) {
            return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
        }

        var locationPath = filterPath(location.pathname);
        var scrollElem = scrollableElement('html', 'body');

        // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
        $('a[href*=#]').each(function() {

            // Ensure it's a same-page link
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/,'') ) {

                    // Ensure target exists
                    var $target = $(this.hash), target = this.hash;
                    if (target) {

                        // Find location of target
                        var targetOffset = $target.offset().top;
                        $(this).click(function(event) {

                            // Prevent jump-down
                            event.preventDefault();

                            // Animate to target
                            $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                                // Set hash in URL after animation successful
                                location.hash = target;

                            });
                        });
                    }
            }

        });

        // Use the first element that is "scrollable"  (cross-browser fix?)
        function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
                var el = arguments[i],
                $scrollElement = $(el);
                if ($scrollElement.scrollTop()> 0) {
                    return el;
                } else {
                    $scrollElement.scrollTop(1);
                    var isScrollable = $scrollElement.scrollTop()> 0;
                    $scrollElement.scrollTop(0);
                    if (isScrollable) {
                        return el;
                    }
                }
            }
            return [];
        }

    });

另一个是在第一个脚本下面声明的。现在，当另一个存在时，这不起作用，但单独使用时效果很好。我也尝试过没有冲突的脚本，但结果也是如此。

<script>
$(document).ready(function(){

$(function(){
   document.querySelector( "#nav-toggle" )
    .addEventListener( "click", function() {
      this.classList.toggle( "active" );
      $(".navmobile").slideToggle();
 });
});
      $(window).resize(function() {
      if ($(window).width() >= 767) {
         $(".navmobile").hide();
      }
      else {
    $("#nav-toggle").removeClass("active");
    $(".navmobile").hide();
    }
   });
});
</script>

Answer 1

您的代码中可能包含此元素：

<a href="#" id="nav-toggle"></a>

注意href="#"部分 - 第一个脚本使用event.preventDefault()为每个包含href的A元素包含“＃”，因此第二个脚本不会获得click事件。 从该元素中移除href="#" （或将该属性保留为空），它应该可以正常工作。

Answer 2

更改

id

到

// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {

因此第一个脚本会忽略您单击以进行切换的链接。

冲突的脚本不起作用

2 个答案: