Question

我创建了一个基于Wordpress的网站，我的所有脚本都使用jQuery 2.1.4。

问题是当我在<header>部分实现jQuery时，然后滚动到顶部＆＃39;工作，但导航（Bootstrap navwalker）没有。当我在functions.php中实现jQuery时，导航工作正常，但“滚动到顶部”＃39}没有按＆＃39;！吨

我尝试使用其他jQuery版本滚动到顶部noConflict，但导航无法正常工作。

我还尝试在<body>和<?php wp_head(); ?>之后立即移动我的所有脚本，但它也无法正常工作。

当我在<head>部分和functions.php部分（仅用于测试）中实现jQuery时，导航功能不起作用。

代码（这样导航工作并滚动到顶部不起作用）：

 <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>


<!-- scroll to top-->
 <script>   
$(document).ready(function(){

    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});
</script>    


 <?php wp_head(); ?>

的functions.php

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {  
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;


add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script( 'jquery-2.1.4.min.js', get_template_directory_uri() . '/js/jquery-2.1.4.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );



function wpt_register_js() { 
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery-2.1.4.min.js');
    wp_enqueue_script('jquery.bootstrap.min');   
} 

add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
    wp_enqueue_style( 'my_template', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );        

// Register custom navigation walker
    require_once('wp_bootstrap_navwalker.php');
?>

导航代码

  <nav class="navbar navbar-default" role="navigation"> 
  <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button>  
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <?php /* Primary navigation */
      wp_nav_menu( array(
           'menu' => 'Menu 1',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        //Process nav menu using our custom nav walker
        'walker' => new wp_bootstrap_navwalker())
        );
        ?>
    </div>
  </nav>

<script>代码的输出顺序：

<script type='text/javascript' src='.../wp-content/themes/tyszka/js/bootstrap.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<!-- some plugin stuff here-->

<link rel="EditURI" type="application/rsd+xml" title="RSD" href=".../xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href=".../wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.2.2" />

    <!-- scroll to top-->
     <script>   
    $(document).ready(function(){

        //Check to see if the window is top if not then display button
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });

        //Click event to scroll to top
        $('.scrollToTop').click(function(){
            $('html, body').animate({scrollTop : 0},800);
            return false;
        });

    });
    </script>    


  </head>

Answer 1

保持代码不变！

只需做一个小改动。将<?php wp_head(); ?>放在滚动脚本之前。

不要包含任何额外的jQuery文件。我觉得应该这样做!!

告诉我们！

修改

浏览您的网站，这就是我的想法。 1.在jQuery之前加载bootstrap js 2.代码中有2个jquery文件

所以我不是Wordpress的专家，但我挖了一些东西，功能wp_register_script和wp_enqueue_script 您在上面的代码中使用了这两个函数，但在这些函数中，有第三个参数接受数组并用于传递依赖项。 Link 1

如果您在数组中传递jquery，我认为您的问题应该得到解决！希望这会有所帮助!!

jQuery实现 - 并非所有脚本都能正常运行

1 个答案: