jquery菜单脚本。 hide()无效

时间:2011-07-07 13:19:57

标签: jquery hide

我正在尝试编写一些关于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>

2 个答案:

答案 0 :(得分:1)

.hide工作得很好,但只有两行(在if内)你很快就会再次show

整个if ($(currentTab).hasClass('showtab')) {块非常混乱。该怎么办?重复分配另一个mouseover而不删除它是一件坏事。过了一会儿,标签会分配几十个处理程序。

当您离开整个if区块时,它可以正常工作。

答案 1 :(得分:0)

好。你没有在任何地方加载jquery。

<script src="jquery.js"></script>

实际加载库时似乎工作正常。 :)