0

我的项目由一个菜单栏组成，当鼠标悬停在每个按钮（hoverIntent）上时，我希望在下面显示子菜单。我正在使用 Wet-Boew（Web 体验工具包）​​（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...
     })

我的问题是，虽然我可以到达 AI 在我的代码中的第一个更改点（并且可以生成更改框），但程序不会运行 $.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" (Bold **) 的正确位置？

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

4

1 回答 1

0

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

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

其次，确保在hoverIntent函数实际定义之前没有这样做，最后，确保传递window.jQuery给立即调用的函数表达式

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

于 2013-10-22T00:36:18.553 回答