jQuery 1.3.2 and IE 8 problem with hide() and show()
Can someone tell me please why the following example work in Firefox but not in IE 8? Only content_1 work correct in IE 8.
Thx vijey.
<script type="text/javascript">
$(function(){
$("#sortable").sortable({handle: '#dragable'});
});
$(function(){
var v;
$('div[id^="content_"]').hover(
function () {
v = $(this).attr('id');
$('#'+v+' #menu').show();
$('#'+v+' #dragable').show();
},
function () {
$('#'+v+' #menu').hide();
$('#'+v+' #dragable').hide();
}
);
});
</script>
<body>
<div id='sortable'>
<div id='content_1'>
<div id='menu' style='display:none;'>
<div>edit</div>
<div>add</div>
<div>delete</div>
</div>
<div id='content'>Content_1</div>
<div id='dragable' style='display:none;'>[drag]</div>
</div>
<div id='content_2'>
<div id='menu' style='display: none;'>
<div>edit</div>
<div>add</div>
<div>delete</div>
</div>
<div id='content'>Content_2</div>
<div id='dragable' style='display:none;'>[drag]</div>
</div>
<div id='content_3'>
<div id='menu' style='display: none;'>
<div>edit</div>
<div&g开发者_如何学运维t;add</div>
<div>delete</div>
</div>
<div id='content'>Content_3</div>
<div id='dragable' style='display: none;'>[drag]</div>
</div>
</div>
</body>
IDs must be unique within a page (html spec [1]); you have 2 #menu, #content, etc. Change them to e.g. <div class="menu"> and your selector to .menu -- that should work.
Incidentally, you can simplify your hover callback with find [2]:
function () {
$(this).find('.menu, .dragable').show();
}
1: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
2: http://api.jquery.com/find/
You can't have multiple elements with the same ID, it's invalid HTML, IDs have to be unique. Your menu elements needs to be a class instead of an ID, like this:
<div id='content_1'>
<div class='menu' style='display: none;'>
<div>edit</div>
<div>add</div>
<div>delete</div>
</div>
<div class='content'>Content_2</div>
<div class='dragable' style='display:none;'>[drag]</div>
</div>
And jQuery like this:
$(function(){
$('div[id^="content_"]').hover(
function () {
$(this).find('.menu, .dragable').show();
},
function () {
$(this).find('.menu, .dragable').hide();
}
);
});
加载中,请稍侯......
精彩评论