jquery菜单脚本。隐藏（）不工作
我正在尝试编写一些关于 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>
i'm trying to write some script about jquery menu. My problem is, that jquery hide() function not working. My code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
.hide工作正常，但仅两行后（在if内），您立即再次show它。整个
if ($(currentTab).hasClass('showtab')) {块非常混乱。它应该做什么？重复分配另一个mouseover而不删除它是一件坏事。一段时间后，选项卡将分配有数十个处理程序。当您保留整个
if块时，它可以正常工作。The
.hideworks fine, but just two lines later (inside theif) you imminentlyshowit again.The whole
if ($(currentTab).hasClass('showtab')) {block is very confusing. What is it supposed to do? Repeatingly assigned anothermouseoverwithout removing it is a bad thing to do. After a while the tabs will have dozens of handlers assigned to them.When you leave the whole
ifblock out, it works fine.出色地。你没有在其中的任何地方加载jquery。
当您实际加载库时似乎工作正常。 :)
Well. You're not loading jquery anywhere in that.
Seems to work fine when you actually load the library. :)