Question

我正在使用Divi主题建立一个单页的WordPress网站，我想要在页面向上/向下滚动时突出显示菜单项：http://codepen.io/ivanchi/pen/QEEeKd?editors=0010。问题是我不能让它在Wordpress上运行。我使用这段代码将它排除在外：

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets', 16 );
            
            wp_register_script( 'jqueryMinJs', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' , '', '', true );
            wp_enqueue_script( 'jqueryMinJs' );
            
            wp_register_script( 'highlight-on-scroll', get_template_directory_uri().'/js/highlight_on_scroll.js', array('jquery'), false, true );
	    wp_enqueue_script( 'highlight-on-scroll' );      
}
?>

我将jquERY脚本包含在/js/highlight_on_scroll.js目录中：

var $jq = jQuery.noConflict(true);
(function($) {

              $jq("div").css("border", "1px solid red");
		$jq("#et-top-navigation a").addClass("green-navigation");

// Cache selectors
var lastId,
 topMenu = $jq("#et-top-navigation"),
 topMenuHeight = topMenu.outerHeight()+1,
 // All list items
 menuItems = topMenu.find("a"),
 // Anchors corresponding to menu items
 scrollItems = menuItems.map(function(){
   var item = $jq($jq(this).attr("href"));
    if (item.length) { return item; }
 });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $jq(this).attr("href"),
      offsetTop = href === "#" ? 0 : $jq(href).offset().top-topMenuHeight+1;
  $jq('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 850);
  e.preventDefault();
});

// Bind to scroll
$jq(window).scroll(function(){
   // Get container scroll position
   var fromTop = $jq(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($jq(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("mactive")
         .end().filter("[href=#"+id+"]").parent().addClass("mactive");
   }                   
});
}($jq));

我用过

var $jq = jQuery.noConflict(true);

用于防止冲突，这两行正常工作（我为测试目的添加了它们）

            $jq("div").css("border", "1px solid red");
    		$jq("#et-top-navigation a").addClass("green-navigation");

但jQuery脚本的其余部分却没有。

我做错了什么？

Answer 1

jquery代码没有执行你正在使用的原因，作为分隔符，你应该使用;

检查掠夺者。

http://plnkr.co/edit/owvH2WPMJ10AQS3MkcHC

如果你使用;然后显示第二个警报，但如果您使用，则代码将无法到达那里。

topMenu = $jq("#et-top-navigation");
topMenuHeight = topMenu.outerHeight()+1;

无法获取滚动jQuery脚本上的高亮菜单项以使用WordPress Divi主题

1 个答案: