无法在 HoverIntent 中进入主要功能

Posted

技术标签:

【中文标题】无法在 HoverIntent 中进入主要功能【英文标题】：Can't Enter Main Function in HoverIntent 【发布时间】：2013-10-22 00:13:45 【问题描述】：

我的项目由一个菜单栏组成，当鼠标悬停在每个按钮上时，我希望在下面显示子菜单（hoverIntent）。我正在使用 Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew) 来创建这些功能。

我的项目工作区由一个主项目 php 文件夹组成，包括一个调用 jquery.min.js 以及随后的 hoverintent.js 和 menubar.js 的索引文件。

下面是 hoverintent.js 的开头：

(function($) 
      // Alert Point A
$.fn.hoverIntent = function(f,g) 
                // Alert Point B
    // default configuration options
    var cfg = 
        sensitivity: 7,
        interval: 100,
        timeout: 0
    ;
    // override configuration options with user supplied object
    cfg = $.extend(cfg, g ?  over: f, out: g  : f );

                etc...
     )

我的问题是，虽然我可以到达代码中的第一个更改点 A（并且可以生成更改框），但程序不会运行 $.fn.hoverIntent = function(f,g)。 ..（我有第二个警报点 B）。我的 menubar.js 也有类似的问题（无法加载代码的主要功能）。

这个问题最常见的来源和解决它的最佳方法通常是什么？

应该注意的是，我之前确实在不同的 php 项目文件夹（仍在项目工作区中）中调用了一个 jQuery，这与该软件的单独登录程序有关。索引文件跳转到登录程序获取用户凭证，然后返回索引文档显示主要内容。

我确定这是我后来在索引文件中引用的同一个 jQuery 文件，在 hoverintent.js 和 menubar.js 之前。这是导致问题的原因吗？

抱歉，我现在没有所有代码可以分享，我会尽快把剩下的代码拿出来。提前致谢。

--更新------------------ -

我的主索引文件包含带有以下代码的头部。请注意，“../”是必需的，因为 wet-boew 项目文件夹与工作区中的主程序项目文件夹（索引）是分开的：

<head>
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script>

<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script>
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script>

<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script>

<title>Title of the Project</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/ico" href="images/icon.ico">

<script src="../wet-boew-master/build/js/settings.js"></script>

<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/>
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head>

再往下，在索引主体内部，我们有菜单栏：

<body>
  <div id="wb-body">
    <div id="wb-head">
      <div id="wb-head-in">
        <header>
          <div id="wu-bnr" role="banner">
            <nav role="navigation">
              <div id="wu-psnb" >
                <div id="wu-psnb-in">
                  <div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;">
                    <div>
                      <ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar">

此时我的菜单栏选项及其各自的子菜单如下所示：

<li *class=""* role="presentation">
<section role="presentation">
    <h3 role="presentation">
        <a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true">
            <span class="expandicon">
                <span class="sublink"><?=$glb_string["activities"]?></span>
            </span>
            <span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span>
        </a>
    </h3>
    <div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**>
        <div class="span-2" role="presentation">
            <ul role="presentation">
                <li role="presentation"><a href="index.php?location=activitiesMenu:index" role="menuitem" class=" knav-1-0-1" tabindex="-1"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></a></li>
                <li role="presentation"><a href="index.php?location=activitiesMenu:create" role="menuitem" class=" knav-1-0-2" tabindex="-1"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></a></li>
            </ul>           
        </div>
    </div>
</section></li>

这是否是上面代码中我的 id="MyHoverIntent"（粗体**）的正确位置？

还应该注意，上面的斜体代码 (*) 没有改变（我假设是因为 menubar 和 hoverIntent 主要功能没有运行）。当用户将鼠标悬停在每个菜单栏选项上或离开它时，这通常会自动更新。我知道这一点是因为 WET-BOEW 文件夹中包含的示例文件显示了一个功能齐全的页面（菜单栏和 hoverIntent 工作），并且在 Firebug 中观察到了这些更改。尽管出于某种原因，Firebug 显示该示例从未引用 menubar.js。

【问题讨论】：

【参考方案1】：

由于我们现在只有一半的代码，但有些事情浮现在脑海中，因此很难说出您到底在做什么阻止您的代码工作。首先，hoverIntent 函数将在您实际在 jQuery 对象上调用它时被调用，就像这样

$('#myHoverIntent').hoverIntent();

其次，确保在hoverIntent 函数实际定义之前没有这样做，最后，确保将window.jQuery 传递给immediately-invoked function expression

这是一个工作示例：http://jsfiddle.net/G3vCS/

【讨论】：

Tom，我已经进行了更新，以便在上面的索引中显示更多我的代码。我尝试包括： $(function() $('#myHoverIntent').hovertIntent(); ) 在 hoverIntent.js 中，在其余代码下方（在 (window.jQuery); 下方）但是我是在我的 Firebug 中出现错误：“TypeError: $(...).hoverIntent 不是函数。”我对 id="myHoverIntent" 的引用也在正确的 div 位置吗？这是菜单栏上特定下拉菜单的子菜单的开始位置。 我已经弄清楚如何进入 hoverintent.js 文件，但是我现在面临两个问题：我不确定应该为 hoverIntent() 输入哪两个参数。一般是 $("myHoverIntent").hoverIntent( showNav , hideNav );但这些在我的代码中未声明。我会把它们设置成什么？此外，在 hoverintent.js 函数中，我无法输入我认为对代码至关重要的任何私有函数： var track = function(ev) alert("I am here3"); cX = ev.pageX; cY = ev.pageY; ; var compare = function(ev,ob) ... var delay = function(ev,ob) ... 等等...

以上是关于无法在 HoverIntent 中进入主要功能的主要内容，如果未能解决你的问题，请参考以下文章

无法在nodejs中导入带有require（）的模块

当应用程序在 iOS12 中进入后台时，URLSessionDelegate 的 didWriteData 不会调用

用python操作MySQL，在python界面中显示的数据时被修改过的，但是从MySQL中进入查看表，数据没有被改变

在php中进行会话检查后无法显示表

我用cmd命令在D盘创建了一个jm的文件夹，现在即使从运行中进入，也是显示空文件，而属性里却有几个G的大小

如何在颤动中进入表单按钮 OnPressed()