jQuery SlideDown / SlideUp 问题

发布于 2024-11-08 03:19:02 字数 1821 浏览 3 评论 0原文

我对 SlideDown / SlideUp 有一个小问题。我有一个里面有子菜单的菜单，我想要实现的是在鼠标悬停在菜单上显示子菜单，我这样做是这样的：

<script type="text/javascript">
$(document).ready(function(){
        $("#menu>li>ul").hide();
        $("ul#menu>li a").mouseover(function(){                     
            $(this).next("ul").slideDown('1000');
            $(this).next("ul").addClass("current_submenu");     
        });
        $(".submenu>li").click(function(){                          
            $(".current_submenu").slideUp('1000');          
        }); 
});
</script>
<ul id="menu">
             <li><a class="album" id="beauty-fashion" href="#">Beauty/Fashion</a>
                <ul>
                    <li><a href="#">Beauty 1</a></li>
                </ul>
             </li>             
             <li><a class="album" id="covers" href="#">Covers</a></li>
             <li><a class="album" id="editorial" href="#">Editorial</a></li>
             <li><a class="album" id="advertising" href="#">Advertising</a></li>
             <li><a class="album" id="fx" href="#">FX</a></li>
             <li><a class="album" id="portraits" href="#">Portraits</a></li>
             <li><a class="album" id="taly" href="#">Taly</a></li>
             <li><a class="disabled" href="#" id="previousImage">Previous</a></li>
             <li><a href="#" id="toggleAnimation">Pause</a></li>
             <li><a class="disabled" href="#" id="nextImage">Next</a></li>
</ul>

子菜单向下滑动，但是当我从中移出鼠标时它不会再次滑动。我做错了什么？

非常感谢你们的帮助！

原文

i have a little issue with slideDown / slideUp. I have a menu with sub-menus inside, what i'm trying to acchieve is to display the submenu on the menu mouse over, and I'm doing it like this:

<script type="text/javascript">
$(document).ready(function(){
        $("#menu>li>ul").hide();
        $("ul#menu>li a").mouseover(function(){                     
            $(this).next("ul").slideDown('1000');
            $(this).next("ul").addClass("current_submenu");     
        });
        $(".submenu>li").click(function(){                          
            $(".current_submenu").slideUp('1000');          
        }); 
});
</script>
<ul id="menu">
             <li><a class="album" id="beauty-fashion" href="#">Beauty/Fashion</a>
                <ul>
                    <li><a href="#">Beauty 1</a></li>
                </ul>
             </li>             
             <li><a class="album" id="covers" href="#">Covers</a></li>
             <li><a class="album" id="editorial" href="#">Editorial</a></li>
             <li><a class="album" id="advertising" href="#">Advertising</a></li>
             <li><a class="album" id="fx" href="#">FX</a></li>
             <li><a class="album" id="portraits" href="#">Portraits</a></li>
             <li><a class="album" id="taly" href="#">Taly</a></li>
             <li><a class="disabled" href="#" id="previousImage">Previous</a></li>
             <li><a href="#" id="toggleAnimation">Pause</a></li>
             <li><a class="disabled" href="#" id="nextImage">Next</a></li>
</ul>

The submenu slides down, but when i do the mouseout from it it wont slideUp again. ¿What I'm doing wrong?

Thanks so much for your help guys!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

著墨染雨君画夕 2024-11-15 03:19:02

这个 javascript 应该可以工作：

$(document).ready(function(){
    $("#menu>li>ul").hide();
    $("ul#menu>li").hover(function(){                     
        $(this).find("ul").slideDown(200).addClass("current_submenu");
    }, function(){
        $(this).find("ul").slideUp(200).removeClass("current_submenu");
    });
});

看看 http://api.jquery.com/hover/了解它如何成为 mouseenter 和 mouseleave 的简写。

我还注意到您的 SlideUp 和 SlideDown 时间是作为字符串插入的。它应该是一个整数，或者类似“快”或“慢”的预定义时间。

This javascript should work:

$(document).ready(function(){
    $("#menu>li>ul").hide();
    $("ul#menu>li").hover(function(){                     
        $(this).find("ul").slideDown(200).addClass("current_submenu");
    }, function(){
        $(this).find("ul").slideUp(200).removeClass("current_submenu");
    });
});

Take a look at http://api.jquery.com/hover/ to learn about how it is a shorthand for mouseenter and mouseleave.

I also noticed that your slideUp and slideDown time was inserted as a string. It should be an integer, or something like 'fast' or 'slow' for pre-defined times.

回复收藏 0 原文

被翻牌 2024-11-15 03:19:02

你可以尝试这个脚本：

$(document).ready(function(){
  $("#menu>li>ul").hide();
  $("#menu>li>ul>li").click(function(){
      $(this).slideUp(1000).removeClass("submenu");  
  });
  $("ul#menu>li").hover(function(){                     
      $(this).find("ul").slideDown(1000).addClass("submenu");
  });  
});

you could try this script:

$(document).ready(function(){
  $("#menu>li>ul").hide();
  $("#menu>li>ul>li").click(function(){
      $(this).slideUp(1000).removeClass("submenu");  
  });
  $("ul#menu>li").hover(function(){                     
      $(this).find("ul").slideDown(1000).addClass("submenu");
  });  
});

回复收藏 0 原文