javascript - js'切换'或'悬停'功能？

Question

我不想使用，当主链接悬停在上面时toggle，我需要使用什么来使以下结构保持不变？nav

当前的js：

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

示例页面

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

Answer 1

如果您对动画不感兴趣，并且希望使用 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");
    });
});

使用可见性意味着元素仍将占用它在 DOM 中的空间，但不会显示以确保其周围其他元素的结构和位置保持完好。缺点是动画，如fadeIn()和fadeOut()将不起作用。

Answer 2

像这样使用

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

悬停在菜单上消失使用这个

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

Answer 3

您的菜单的 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");
   });
});