Javascript js'；切换'；或'；悬停'；功能？

我不想使用

切换

，当主链接悬停在上方时，我需要使用什么才能使以下

nav

结构保持不变

当前js：

<script type="text/javascript"> 
  $(document).ready(function(){
    $(".downservices").hover(function(){
      $(".servicesdropped").toggle("fast");
    });
  });
</script>

$（文档）.ready（函数（）{
$（“.downservices”）.hover（函数（）{
$（“.servicesdroped”）。切换（“快速”）；
});
});

（注意，当子菜单弹出时，我无法单击链接，因为子菜单会逐渐消失）

这样使用

<script type="text/javascript"> 
$(document).ready(function(){
$(".downservices").hover(function(){
$(".servicesdropped").slideDown();
});
});
</script>

$（文档）.ready（函数（）{
$（“.downservices”）.hover（函数（）{
$（“.servicesdroped”）.slideDown（）；
});
});

对于“鼠标悬停”菜单“消失”，请使用以下命令

<script type="text/javascript"> 
$(document).ready(function(){
$(".downservices").hover(
function(){
$(".servicesdropped").slideDown();
},
function(){
$(".servicesdropped").slideUp();
}
);
});
</script>

$（文档）.ready（函数（）{
$（“.downservices”）。悬停(
函数（）{
$（“.servicesdroped”）.slideDown（）；
},
函数（）{
$（“.servicesdropped”）.slideUp（）；
}
);
});

如果您对动画不感兴趣，并且希望使用JQuery，则可以在类上切换CSS可见性规则

$(document).ready(function()

// Make sure the item is hidden initially, best to do
// this in CSS.
$(".servicesdropped").css("visibility", "hidden");

{
    $(".downservices").hover(function()
    {
        $(".servicesdropped").css("visibility", "display");
    },
    function()
    {
        $(".servicesdropped").css("visibility", "hidden");
    });
});

---

使用visiblity意味着元素仍将占用它在DOM中的空间，但不会显示，以确保其周围其他元素的结构和位置保持不变。缺点是像

fadeIn（）

和

fadeOut（）

这样的动画不起作用。

菜单的html标记体系结构应该是这样的：

<ul>
  <li class="downservices"><a href="#">GUYS</a>
    <div class="servicesdropped" style="display: none;">
      <ul class="middle">
        <h3>Shirts &amp; Tanks:</h3>
        <li><a href="#">MuSkull</a></li>
        <li><a href="#">Bamboo Athletic Tank</a></li>
        <li><a href="#">Thin Strap Tank</a></li>
     </ul>

     <ul class="right">
       <h3>Other Stuff:</h3>
       <li><a href="#">Shorties</a></li>
       <li><a href="#">Hoodies</a></li>
       <li><a href="#">Socks</a></li>
       <li><a href="#">Hats</a></li>
    </ul>
   </div>
  </li>
  <li><a href="#">products</a></li>
  <li><a href="#">portfolio</a></li>
  <li><a href="#">contact</a></li>
</ul>

应向下滑动（）

$(document).ready(function(){
   $("li.downservices").hover(function()
   {
      $(this).find(".servicesdropped").slideDown("fast");
   },
   function()
   {
      $(this).find(".servicesdropped").slideUp("fast");
   });
});