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 悬停,因为即使警报没有出现。我在 document.ready 中使用 ajax 功能的另一件事是工作正常。提到的 jquery 代码是在 ajax 调用之后插入的。我检查了 IE8 和 chrome。

4

2 回答 2

0

您隐藏ul列表,因此display:none;从 ul css 中删除,然后尝试

演示-1

因为你隐藏了 ul 所以 div 下没有内容可以悬停所以尝试添加min-height:10px;到 div

演示-2

于 2012-11-03T11:41:49.437 回答
0

由于ulcss是display:none;所以它没有显示任何东西并且悬停不起作用。请display:none;ul.

于 2012-11-03T11:48:37.460 回答