1

Superfish jQuery プラグインを使用して、Web サイトのドロップダウン メニューを拡張しようとしています。ただし、Firefox ブラウザー (v. 21.0) でカーソルを置いたときにドロップダウン メニューが開きません。Chrome と Opera では動作します。Superfish プラグインがない場合、ドロップダウン メニューはプレーンな CSS を使用する Firefox でも機能します。

Superfishのオプションを使用するcssArrowsと、どのブラウザーでも矢印が表示されません (さらにパディングを使用している場合でも)。この問題が最初の問題に関連しているかどうかはわかりません。

ここに私のマークアップがあります:

<nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li>
            <a href="#">Page 2</a>
            <ul>
                <li><a href="#">Page 2.1</a></li>
                <li><a href="#">Page 2.2</a></li>
                <li><a href="#">Page 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

そして、ここに私のCSS/SASSがあります:

 nav {
    width: 100%;
    float: left;

    ul {
        display: block;
        float: left;
        width: 100%;

        li {
            position: relative;
            display: block;
            float: left;

            a {
                display: block;
                padding: 14px 14px;
            }
            /* drop-down */
            ul {
                display: none;
                position: absolute;
                left: 0;
                top: 100%;
                padding: 0;
                border: 1px solid #aaa;
                border-top-width: 0;

                li {
                    float: none;
                    a {
                        padding: 8px 3px;
                        border-top: 1px solid #aaa;
                    }
                }
            }

            &:hover,
            &.sfHover {
                ul {
                    display: block;
                }
            }
        }
    }
}

これが私のスーパーフィッシュコールです：

$('nav').superfish();

Firefox でli、第 2 レベルのメニューを保持するタグにカーソルを合わせると、クラスがli取得されません。sfHover代わりに、最上位ulにsfHoverクラスが割り当てられます。次に、そのタグでマウスの左ボタンを押すliと、「sfHover」タグが取得され、ドロップダウン メニューが表示されます。Chrome と OperasfHoverクラスでは、適切な要素に割り当てられます。

Superfish プラグインのサイトの例は、私の Firefox ブラウザーでも機能しますが、これを解決するのには役立ちませんでした。メニューの HTML マークアップは、これらの例とほぼ同じです。

私はしようとした

  • z インデックスをさまざまな要素に割り当てますが、役に立ちませんでした (期待していませんでした)。現在、ページ上のどの要素にも z-index が割り当てられていません。
  • 問題のある状況で役立つことを読んだのでli、要素に幅を割り当てます。a
  • Superfish の例のスタイルシートを使用しましたが、うまく機能しませんでした。
  • margin-left: -9999pxの代わりに ドロップダウンメニューを非表示にしますdisplay: noneが、それは役に立ちませんでした。
  • Superfish の初期化時にすべてのオプションを使用する
  • タグの代わりにタグposition: relativeで使用するali

また、html が有効であることも確認しました。

誰が問題が何であるかを理解できますか？提案をいただければ幸いです。

4

2 に答える 2

1

OK、問題は jQuery のバージョンではありませんでした。私はそれがうまくいったと一瞬誤解したと思います。

プロジェクトでワードプレス 3.5.2 を使用していますが、スーパーフィッシュと競合しました。今はあまり詳しく調べる時間がありませんが、次のことがわかりました。

wp-includes/js/admin-bar.min.js は hoverIntent 関数を使用しており、そのスクリプトの実行時に jQuery が既に含まれているがhoverIntent定義されていない場合は、関数jQuery.fn.hoverIntent自体を定義します。

hoverIntent jQuery プラグインは、必要に応じて superfish で使用できます。hoverIntentプラグインが定義されている場合、superfish はそのプラグインの関数を 1 回呼び出します。サブメニューを保持しているリスト項目の上にカーソルを置いたときにエラーが発生したため、この呼び出しによりドロップダウン メニューが表示されませんでした (admin-bar.min.js で「b.browser が定義されていません」)。

Firefox でしか表示されなかったのは、他のブラウザーではなく、Firefox でのみこのワードプレス サイトにログインしたためです...

ただし、スーパーフィッシュにはオプションがありますdisableHI。これを に設定するとtrue、superfish は hoverIntent を呼び出しません。私はすでにそのオプションを試したと思っていましたが、とにかく、もちろんうまくいきました.

于 2013-07-02T17:05:41.437 に答える