我正在制作导航栏,但使用 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。