jQuery 快把我逼疯了。我在网上四处寻找一个简单的类别扩展器 slider ，但没有找到。我试图在这里创建一个。
我遇到的问题是在尝试隐藏()之前显示()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>
最佳答案
你在这里能做的最好的事情就是得到一个类似的效果，像这样:
$("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()基本上。
关于jquery 隐藏不工作(不是 IE)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3092250/