jquery隐藏不起作用（不是IE）答案

【问题标题】：jquery hide not working (NOT IE)jquery隐藏不起作用（不是IE）
【发布时间】：2011-03-06 18:08:03
【问题描述】：

jQuery 快把我逼疯了。我在网上四处寻找一个简单的类别扩展滑块，但没有找到。我已经尝试在这里创建一个。

我遇到的问题是在尝试隐藏（）之前显示（）n的元素时。如果在调用 hide() 之前另一个元素是 show()n，则忽略对第一个元素的 hide() 调用！

请原谅我发布了完整的 HTML（请随时建议我将来应该在哪里托管整个代码示例）。

如果有人对 jQuery 插件或我正在尝试做的其他实现有任何建议，请指出我的方向 - 我很乐意使用已经制作的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $().ready(function() {
                $("ul.box_li li.parent").mouseenter(function(event){
                    event.stopPropagation();
                    $(this).children("ul:first").show('slide',{direction: 'left'});
                }).mouseleave(function(event){
                    event.stopPropagation();
                    $(this).children("ul:first").hide('slide',{direction: 'left'});
                });
            });
        </script>
        <style type="text/css">
            body {font-size:10pt;}
            ul.box_li li.parent {position:relative;}
            ul.box_li li {background-color:#e6e6e6;width:200px;border:1px solid red;list-style-type:none;padding:5px;}
            ul.box_li>li ul {display: none;position: absolute;top: 0;left: 100%;}
        </style>
    </head>
    <body>
        <ul class="box_li">
            <li class="parent">
                FIRST
                <ul>
                    <li class="parent">
                        FIRST_SUB_1
                        <ul>
                            <li>FIRST_SUB_1_SUB_1</li>
                            <li>FIRST_SUB_1_SUB_2</li>
                            <li>FIRST_SUB_1_SUB_3</li>
                            <li>FIRST_SUB_1_SUB_4</li>
                        </ul>
                    </li>
                    <li>FIRST_SUB_2</li>
                </ul>
            </li>
            <li class="parent">
                SECOND
                <ul>
                    <li>SECOND_SUB_1</li>
                    <li>SECOND_SUB_2</li>
                    <li>SECOND_SUB_3</li>
                    <li>SECOND_SUB_4</li>
                    <li>SECOND_SUB_5</li>
                    <li>SECOND_SUB_6</li>
                    <li>SECOND_SUB_7</li>
                    <li>SECOND_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                THIRD
            </li>
            <li class="parent">
                FOURTH
                <ul>
                    <li>FOURTH_SUB_1</li>
                    <li>FOURTH_SUB_2</li>
                    <li>FOURTH_SUB_3</li>
                    <li>FOURTH_SUB_4</li>
                    <li>FOURTH_SUB_5</li>
                    <li>FOURTH_SUB_6</li>
                    <li>FOURTH_SUB_7</li>
                    <li>FOURTH_SUB_8</li>
                </ul>
            </li>
            <li class="parent">
                FIFTH
                <ul>
                    <li>FIFTH_SUB_1</li>
                    <li>FIFTH_SUB_2</li>
                    <li>FIFTH_SUB_3</li>
                    <li>FIFTH_SUB_4</li>
                    <li>FIFTH_SUB_5</li>
                    <li>FIFTH_SUB_6</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

【问题讨论】：

+1 让我第一个欢迎您加入 SO！

标签： jquery html html-lists show-hide

【解决方案1】：

在这里你能做的最好的就是获得一个类似的效果，像这样：

$("ul.box_li li.parent").hover(function(){
    $(this).children("ul:first").animate({ width: 'toggle'});
});

You can view a demo here，这是因为 jQuery UI 效果如何处理自己，它们并没有真正正确地遵循队列规则，请看the source for the slide effect：

el.animate(animation, { queue: false, ....

这些效果故意超出了正常的 fx 动画队列，虽然我不确定是谁做出了这个决定，但应该反过来......但这就是导致您当前问题的原因。我猜它们明确用于不可中断的操作，例如对话框消失、选项卡更改等...基本上不会调用 .stop() 的事情。

【讨论】：