我正在尝试编写一些关于jquery菜单的脚本。我的问题是,jquery hide()函数不起作用。我的代码:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#topmenu ul li').mouseover(function(){
$('#topmenu ul li').removeClass('show');
$('.child').hide();
$(this).addClass('show');
var currentTab = $(this).attr('id').replace("parent", "#child");
$(currentTab).addClass('showtab');
$(currentTab).show();
return false;
});
$('#topmenu ul li').mouseout(function(){
var currentParent = $(this).attr('id').replace("parent", "#parent");
var currentTab = $(this).attr('id').replace("parent", "#child");
$(currentTab).hide(); <---- this not works
if ($(currentTab).hasClass('showtab')) {
$(currentTab).show();
$(currentTab).mouseout(function(){
/*alert($(this).height());*/
$(this).removeClass('showtab');
$(currentParent).removeClass('show');
$(this).hide();
});
}
return false;
});
});
</script>
</head>
<div class="wrapper">
<div id="topmenu">
<ul>
<li id="parent1" class="parent first">First</li>
<li id="parent2" class="parent">second</li>
<li id="parent3" class="parent">third</li>
<li id="parent4" class="parent">fourth</li>
<li id="parent5" class="parent">fift</li>
<li id="parent6" class="parent last">sixt</li>
</ul>
<div id="child1" class="child">
blah blah blah 1
</div>
<div id="child2" class="child">
blah blah blah 2
</div>
<div id="child3" class="child">
blah blah blah 3
</div>
<div id="child4" class="child">
blah blah blah 4
</div>
<div id="child5" class="child">
blah blah blah 5
</div>
<div id="child6" class="child">
blah blah blah 6
</div>
</div>
</div>
答案 0 :(得分:1)
.hide
工作得很好,但只有两行(在if
内)你很快就会再次show
。
整个if ($(currentTab).hasClass('showtab')) {
块非常混乱。该怎么办?重复分配另一个mouseover
而不删除它是一件坏事。过了一会儿,标签会分配几十个处理程序。
当您离开整个if
区块时,它可以正常工作。
答案 1 :(得分:0)
好。你没有在任何地方加载jquery。
<script src="jquery.js"></script>
实际加载库时似乎工作正常。 :)