Мой проект состоит из меню, и я хотел бы, чтобы подменю отображалось ниже, когда мышь нависает над каждой кнопкой (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...
})
Моя проблема заключается в том, что, хотя я могу достичь первой переменной AI, имеющейся в моем коде (и может генерировать поле alter), программа не будет запускать функцию $.fn.hoverIntent = (f, g) {...} (где у меня есть вторая точка оповещения B). У меня есть аналогичная проблема с моей menubar.js (где основные функции кода не загружаются).
Как обычно это самый распространенный источник этой проблемы и лучший способ ее исправить?
Следует отметить, что я раньше вызывал jQuery в другой папке проекта php (все еще внутри рабочей области проекта), которая связана с отдельной программой входа в систему для этого программного обеспечения. Файл индекса переходит к программе входа в систему, чтобы получить учетные данные пользователя, прежде чем возвращать индексный документ для отображения основного содержимого.
Я убедился, что это был тот же самый файл jQuery, который я позже упоминал в файле индекса до hoverintent.js и menubar.js. Это то, что вызывает проблему?
Извините, у меня нет всего кода на данный момент, чтобы поделиться, я постараюсь, чтобы все остальное в ближайшее время. Заранее спасибо.
----------------ОБНОВИТЬ-------------------------------
В моем основном индексном файле есть голова со следующим кодом. Обратите внимание, что "../" требуется, так как папка проекта с мокрым каналом находится отдельно от основной папки проекта программы (индекс) в рабочей области:
<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 **) в коде выше?
Следует также отметить, что курсивный код (*) выше не изменяется (я предполагаю, что главные функции меню и hoverIntent не работают). Обычно это будет автоматически обновляться по мере того, как пользователь наводится на каждый вариант меню или оставляет его. Я знаю это из-за образца файла, который был включен в папку WET-BOEW, которая показывает полностью функционирующую страницу (с рабочим меню и hoverIntent), и эти изменения были отмечены в Firebug. Хотя по какой-то причине Firebug показал, что образец никогда не ссылался на menubar.js.
Немного сложно сказать, что именно вы делаете, что перестает работать с вашим кодом, так как у нас есть только половина кода прямо сейчас, но на ум приходит кое-что. Во-первых, функция hoverIntent
, когда вы на самом деле называете ее объектом jQuery
$('#myHoverIntent').hoverIntent();
Во-вторых, убедитесь, что вы этого не делаете до того, hoverIntent
функция hoverIntent
действительно будет определена и, наконец, убедитесь, что вы передаете window.jQuery
в ваше мгновенное выражение функции
Вот сценарий рабочего примера: http://jsfiddle.net/G3vCS/