Я пытаюсь написать скрипт о меню 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>