jquery - jQuery：ホバーリンクshow / hidden div

Question

これは初心者の質問のようです（私はJavaScriptの初心者なので、たくさんグーグルで検索しました）が、それでも機能させることができません。誰か助けてくれませんか？

リンク番号の付いたリストメニューがあります。各リンクには、マウスオーバーで表示/非表示にする独自のサブメニューがあります。リンクとサブメニューは、同じようなIDを持つ方法で接続されています。

このような...

リンク：

    a id = 815 class = "menuItem" href = "/ default____ 815.aspx">

隠しdiv：

    div id = "subMenudiv815" class = "HoverTopSubMenuBlock" style = "display：none">

いくつかのmenuItemがあるので、divを手動で指定したときに機能する関数をループさせようとしました。これは私が試したものです：

var j = [66,815,1006,9581,1239,1206,816];
var menu = [];
var hoverdiv = [];
for (var i = 0; i < j.length; i++) {
    menu[i] = "#"+j[i];
    hoverdiv[i] = "#subMenudiv" + j[i];
    $(rubrik[i]).hover(function() {
        $(hoverdiv[i]).show();
    }, function() {
        $(hoverdiv[i]).delay(1000).hide(0);
    });
}

私はeach（）-関数を使おうとしましたが、それはあまり役に立ちませんでした。

score 1 · Accepted Answer

ドロップダウンメニューを作成するのに jquery は必要ありません。html と css のみを使用できます。

HTML

<ul id="nav">
    <li>
        <a href="#" title="">Link 1</a>
    </li>

    <li>
        <a href="#" title="">Link 2</a>
        <ul>
            <li><a href="#" title="">Sub Link 1</a></li>

            <li><a href="#" title="">Sub Link 2</a></li>
        </ul>
    </li>
</ul>

CSS

#nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#nav > li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    position: relative;
}

#nav > li > a {
    padding: 0 10px;
    display: inline-block;
    background: #cccccc;
}

#nav > li:hover > a {

}

#nav > li > ul {
    display: none;
    position: absolute;
    width: 200px;
}

#nav > li:hover > ul {
    display: block;
}

#nav > li > ul > li { 
}
#nav > li > ul > li > a {
    display: block;
    background: #cccccc;   
    padding: 0 10px;
}

#nav > li > ul > li:hover > a {

}

デモ

これを行う方法に関する情報を次に示します。

score 0 · Accepted Answer

これを試して...

$('a.menuItem').hover(function(){
    $('#subMenudiv' + this.id).show();
}, function(){
    $('#subMenudiv' + this.id).delay(1000).hide(0);
});

この例を参照してください

ご挨拶。

score 0 · Accepted Answer

助けてくれてありがとう！

質問への回答が得られたらメール通知が届くと思っていたので、試行錯誤して解決策にたどり着きました。MG_Bautista が提案したのとほぼ同じコードになりました。

$('a.menuItem').hover(function(){
    $('#subMenudiv' + this.id).show();
}, function(){
    $('#subMenudiv' + this.id).delay(1000).hide(0);
});

score 0 · Accepted Answer

私が見るいくつかのこと：

アンカーリンクでは、id 値を引用符で囲む必要があります ( id=815 の代わりに id="815" )
それらを変数内に配置し、その変数を呼び出すだけでそれらを再利用する場合は、セレクターの周りに jQuery $ を配置する必要があります ( menu[i] = $("#"+j[i]); )
rubrik[i] がどこから来ているのかわかりませんが、dom 内の位置に基づいて要素を呼び出そうとする場合は、「:eq(x)」セレクターを使用する必要があります。クラス HoverTopSubMenuBlock で 3 番目の要素を取得する場合と同様に、$(".HoverTopSubMenuBlock:eq(3)") で取得できます。

しかし、もし私があなたなら、次のようにします。

$(".menuItem").hover(function(){
    var id = $(this).attr('id');
    $("#subMenudiv" + id).show();
},function(){
    var id = $(this).attr('id');
    $("#subMenudiv" + id).delay(1000).hide();
});

私はそれがすべてのループやものなしでそれを行うと思います.

jquery - jQuery：ホバーリンクshow / hidden div

4 に答える 4

Related

Reference