javascript - HoverIntent でメイン関数を入力できません

Question

私のプロジェクトはメニューバーで構成されており、マウスが各ボタン (hoverIntent) の上に置かれたときにサブメニューを下に表示したいと考えています。Wet-Boew (Web Experience Toolkit) ( https://github.com/wet-boew/wet-boew ) を使用してこれらの機能を作成しています。

私のプロジェクトワークスペースは、jquery.min.js を呼び出し、続いて hoverintent.js と menubar.js を呼び出すインデックスファイルを含むメインプロジェクトの php フォルダーで構成されています。

以下は、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){...} を実行しないことです。 (ここに 2 番目のアラートポイント B があります)。私のmenubar.jsにも同様の問題があります(コードの主な機能がロードされません)。

通常、この問題の最も一般的な原因とそれを修正する最善の方法は何ですか?

このソフトウェアの別のログインプログラムに関係する別の php プロジェクトフォルダー (まだプロジェクトワークスペース内) で、以前に jQuery を呼び出すことに注意してください。インデックスファイルは、メインコンテンツを表示するためにインデックスドキュメントに戻る前に、ログインプログラムにジャンプしてユーザーの資格情報を取得します。

hoverintent.js と menubar.js の前に、後で index ファイルで参照したのと同じ jQuery ファイルであることを確認しました。これが問題の原因ですか？

申し訳ありませんが、現時点では共有できるすべてのコードがありません。残りはすぐに公開できるように努めます。前もって感謝します。

- - - - - - - - アップデート - - - - - - - - - - - - - - - -

メインのインデックスファイルには、次のコードを含む head が含まれています。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" (太字 **) の正しい場所でしょうか?

また、上記のイタリック体のコード (*) は変更されていないことにも注意してください (メニューバーと hoverIntent のメイン関数が実行されていないためだと思います)。これは通常、ユーザーが各メニューバーオプションにカーソルを合わせるか、そこから離れると自動更新されます。これは、WET-BOEW フォルダーに含まれていたサンプルファイル (メニューバーと hoverIntent が機能している) が完全に機能しているページを示しているためです。これらの変更は Firebug で確認されました。何らかの理由で Firebug は、サンプルが menubar.js を参照していないことを示しました。

score 0 · Accepted Answer

現在、コードの半分しかないため、コードが機能しなくなる原因を正確に特定するのは少し困難ですが、いくつかのことが思い浮かびます。まず、このhoverIntentようにjQueryオブジェクトで実際に呼び出すと、関数が呼び出されます

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

次に、関数が実際に定義される前にそれを行っていないことを確認し、最後に、すぐに呼び出される関数式にhoverIntent渡しwindow.jQueryていることを確認します

これは実際の例のフィドルです: http://jsfiddle.net/G3vCS/

javascript - HoverIntent でメイン関数を入力できません

1 に答える 1

Related

Reference