0

我知道这里有一百万个，但我已经筛选了好几天，我无法让这段代码工作。

我正在尝试将 hoverIntent 添加到现有的 Wordpress 主题 Atahualpa。我喜欢这个主题，但我希望菜单能保留一段时间。对于复杂的页面结构，这是一个相当大的 GUI 可用性问题。

我对 Javascript 很陌生，所以我很难知道我的语法等是否正常。我希望这很容易。这就是我所在的地方。

我已经在我的网站上加载了 .js，并使用了 Firebug 控制台来确保它正在加载。

我在主题中启用了“菜单动画”。这有一些逻辑可以将其指向原始代码，就是这样。

/* JQUERY */
jQuery(document).ready(function(){ 
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
    jQuery("#rmenu2 li.rMenu-expand").hover(function(){
    jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
    jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);  
  },function() {
    jQuery(this).find('ul.rMenu-ver:first').css("display","block");
    jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
    jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
   });

在查看了许多不同的示例后，我将代码更改为以下内容。我想保留动画效果（但如果他们是 PITA，他们可以去），我想对延迟进行一点控制。最重要的是，虽然我需要 hoverIntent 才能工作，因为复杂的页面结构难以导航。

/* JQUERY */
$(document).ready(function(){ 
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
    $("#rmenu2 li.rMenu-expand").hoverIntent({
    over: function(){
    jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
    jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
    $(this).children('a:first').addClass("hov");    
  },
  timeout: 500,
  out: function() {
    jQuery(this).find('ul.rMenu-ver:first').css("display","block");
    jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
    jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
    $(this).children('a:first').removeClass("hov");
   });

此代码已损坏。菜单恢复到其默认的 CSS 样式，因此它仍然可以运行，但是动画消失了，并且当鼠标移出菜单时，它们的延迟为 0。

请帮忙！我究竟做错了什么？

4

1 回答 1

2

基于http://kv5r.com/wordpress-and-hoverintent/和您自己的代码，我取得了有限的成功。

这是为 atahualpa 在 functions.php 中附加的代码：

function enq_hoverIntent() { wp_enqueue_script('hoverIntent'); }
add_action('wp_enqueue_scripts', 'enq_hoverIntent');

function init_hoverIntent() { ?>
<script type='text/javascript'>
  jQuery(document).ready(function(){
    jQuery('#rmenu2 > li.rMenu-expand').hoverIntent({
      over : navover,
      out : navout,
      timeout : 500
    });
    function navover(){
        jQuery(this).find('ul.rMenu-ver:first')
                .css({"display":"block","position":"absolute"});
        jQuery(this).find('ul.rMenu-ver:first li')
                .css({"display":"none"}).show();
    }
    function navout(){
        jQuery(this).find('ul.rMenu-ver:first')
                .css("display","block");
        jQuery(this).find('ul.rMenu-ver:first li')
                .css("display","block").hide();
        jQuery(this).find('ul.rMenu-ver:first')
                .hide();
    }
  });
</script>
<?php }
add_action('wp_head', 'init_hoverIntent');

请注意，我只将 hoverintent 应用到了第一级子菜单（#rmenu2 > li.rMenu-expand）。您可以自行更改。

我还在一般规则中添加了以下 CSS，以禁用菜单主级别的默认行为。

#rmenu2>li:hover>ul{display:none;}
于 2014-05-21T09:24:41.870 回答