1

我在导航栏上运行两次 jQuery 动画时遇到问题。鼠标悬停一次会导致它飞下来然后再飞回来。它不会保持可见。鼠标移动两次会产生正确的效果。以下是导航的设置方式：

<div id="nav">
<ul>
  <li><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul>
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
...
</ul>

脚本：

<script type="text/javascript">
$('body').ready(function() {
$('li').hover(function() {
$(this).find('li').slideToggle(); 
});
});
</script>
4

2 回答 2

1

我假设这是一个下拉菜单？

我假设您想要制作整个列表幻灯片，而不仅仅是列表项。

<script type="text/javascript">

    $(function() {
        $('li').hover(function() {
            $(this).find('ul').slideToggle(); 
        });
    });

</script>

寿，如果你想让他们在鼠标移出时隐藏......

<script type="text/javascript">

    $(function() {
        $('li').mouseenter(function() {
            $(this).find('ul').slideDown(); 
        }).mouseleave(function(){
            $(this).find('ul').slideUp(); 
        });
    });

</script>

或者谁知道，我可能完全想念你的问题。

希望这会有所帮助。

于 2012-05-09T19:12:06.607 回答
1

在JSFiddle中试试这个

HTML

<div id="nav" style="width:200px">
<ul style="border:1px solid red">
  <li class="topMenuItem"><a href="en.about.html">About<img src="images/down_arrow.png" alt=""/></a>
    <ul style="display:none">
      <li><a href="en.accreditations.html">Accreditations</a></li>
      <li><a href="en.partnerships.html">Partnerships</a></li>
      <li><a href="en.labs.html">Laboratories</a></li>
      <li><a href="">Industries</a></li>
      <li><a href="">Photo Gallery</a></li>
    </ul>
   </li>
</ul>
</div>

JavaScript ​</p> 

$(document).ready(function(){
    $('.topMenuItem').mouseenter(function() {
        $(this).find('ul').slideDown();
    });

    $('.topMenuItem').mouseleave(function(){
        $(this).find('ul').slideUp();
    });
​});
于 2012-05-09T19:14:23.907 回答