0

ナビゲーション バーを作成していますが、JQuery を使用した div ホバーが機能しません。どこが間違っているのかわかりません。HTML コード:

<div  id="Navigation_left_0"><a href="">click This</a>
    <ul id="navScroll_0" sizset="true">
        <li><a href="">abcd</a></li>
        <li><a href="">abxfdcd</a></li>
        <li><a href="">afgvbcd</a></li>
        <li><a href="">asfrbcd</a></li>
    </ul>
</div>
<div  id="Navigation_left_1" ><a href="">click This</a>
    <ul id="navScroll_1" sizset="true">
        <li><a href="">abcd</a></li>
        <li><a href="">abxfdcd</a></li>
        <li><a href="">afgvbcd</a></li>
        <li><a href="">asfrbcd</a></li>
    </ul>
</div>

JQuery コード:

$(document).ready(function() {
    $('div[id^="Navigation_left"]').hover(

    function() {
        alert("Hello");
        var id = $(this).attr('id');
        var idStr = id.split('_');
        $(this).css('background-color', 'grey');
        var idNum = parseInt(idStr[2]);
        var ulID = "#navScroll_" + idNum;
        $(ulID).css({
            'display': 'block',
            'height': '3em',
            'float': 'left',
            'padding-right': '2px'
        });
    }, function() {
        var id = $(this).attr('id');
        var idStr = id.split('_');
        var idNum = parseInt(idStr[2]);
        $("#navScroll_" + idNum).css('display', 'none');
        $(this).css('background-color', 'red');
    });
});​

CSS 部分:

ul{
  list-style-type:none;
  height:50px;
  display:none;
}
ul li {
    height: 3em;
    float:left;
    padding-right:2px;
    list-style-type:none;
    width:33%;
   }
div {
  background-color:red;
  float:left;
  width:"20%";
  height:"5%";
  padding-left:10px;
  padding-right:10px;
  position:relative;
}

複数の div がありますが、コードの理解に役立つコードのみを配置しました。アラートも表示されないため、コントロールは div ホバーになりません。もう 1 つ、正常に動作している document.ready で ajax 機能を使用しています。上記の jquery コードは、ajax 呼び出しの後にプラグインされます。IE8 と chrome の両方をチェックインしました。

4

2 に答える 2

0

リストを非表示にするので、ul cssからul削除してから試してくださいdisplay:none;

デモ-1

あなたはulを隠しているので、divの下にホバーするコンテンツがないので、min-height:10px;divに追加してみてください

デモ-2

于 2012-11-03T11:41:49.437 に答える
0

ulcss が原因で、display:none;何も表示されず、ホバーが機能しません。display:none;から css を削除してulください。

于 2012-11-03T11:48:37.460 に答える