0

私のコードで次の問題が発生しています->jQueryと相互作用していないようですが、jsコンソールでエラーが発生していません：

このメニューのメインのドロップダウンタイトルはTrailsです

Trailsにカーソルを合わせると、以下が表示されます。<li>

jQuery：

jQuery(document).ready(function () {
    $(".current a").mouseenter(function(){
       $(this).siblings("ul").show();
    }).mouseout(function(){
       $(this).siblings("ul").hide();
    });
});

CSS：

//Controls the sub li    
#wrapper #contentarea #blue_box .centerblue_txt ul li ul li{
        width:185px;
        padding:5px 0 5px 5px;
        border-top:1px dotted #424242;
        border-bottom:0px;
    }
//Controls the sub ul
    #wrapper #contentarea #blue_box .centerblue_txt ul li ul{
        border:1px solid red;
        display:none;
    }

HTML： -このHTMLフォーマットはPYROCMSによって提供されており、私はそれを制御できません

<li class="current">
        <a href="">Trials</a>
        <ul>
            <li class="first">
                <a href="">Link One</a>
            </li>
            <li>
                <a href="">Link Two</a>
            </li>
            <li>
                <a href="">Link Three</a>
            </li>
            <li class="last">
                <a href="">Link Four</a>
            </li>
        </ul>
    </li>
4

2 に答える 2

2

ねえ、これはまさにあなたが求めているものではないかもしれませんが、これはあなたの問題を解決します.

これを CSS に追加し、その jQuery スクリプトを削除します

​.curre​nt > ul {
display: none;
}

​.current:hover > ul {
display: block;
}​

なんらかの理由でjQueryが機能していない場合でも、実行しても目的の結果が得られないことをお伝えします.

于 2012-04-17T04:16:34.987 に答える
2

これがジェスに求めていた答えです。競合の可能性を減らすために、独自の名前空間を作成できます。jQuery 自体は、最も一般的には、または$ の代わりに$実際の単語/名前を使用することもできます。jQueryただし、任意の単語/名前で独自のバージョンを作成することもできます。スクリプト名の冒頭で変数を指定します。私の例では、次のようにあなたの名前を使用しました。

var jess = jQuery;

次に、使用するたびにjess、jQuery である変数値を使用します。そう：

jess(document).ready()

次と同等です。

$(document).ready()

そしてへ：

jQuery(document).ready()

サブメニューを表示またはクリックできない限り、マウスが親要素から離れるとすぐにサブメニューを失うことを意味する親要素の上にカーソルを置いたときに、jquery 呼び出しがサブメニューのみを表示するためです。メニューとサブメニューに関しては、tea_totaler のアドバイスを受けて CSS を使用すると、ユーザーにとってはるかに簡単でクリーンになります。

これは名前空間に関する適切な記事です。

サブメニューにどうしても jQuery を使用する場合は、 and関数.toggleではなく 関数を使用できます。and/orイベントではなく、イベントとして作成します。繰り返しますが、JS を使用してメニューの最高の感触を得ることはできません。CSS を使用することをお勧めしますが、これはマウス イベントの良い代替手段になると思います。.show.hideonClickmouseentermouseOver.toggle

これは、簡単で基本的な CSS を使用して必要な結果を得るためのフィドルです。

于 2012-04-17T04:52:54.963 に答える