jquery hide not working（NOT IE）

jQuery让我疯狂。我环视网络上的一个简单的类别扩展滑块，但没有找到一个。我试图在这里创建一个。jquery hide not working（NOT IE）

我遇到的问题是当试图隐藏（）一个元素先前show（）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>

来源

2010-06-22 mykchan

+1让我成为第一个欢迎你来到SO！ – Dubs 2010-06-22 10:48:09

，你可以在这里做的最好的是获得类似效果，像这样：

$("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()。

来源

2010-06-22 10:54:59

谢谢堆！这对我之后的工作非常有效。 – mykchan 2010-06-22 11:07:55

jquery hide not working（NOT IE）

回答

相关问题