JS“切换”或“悬停”功能

js 'toggle' or 'hover' function?

本文关键字：功能 悬停 JS 切换      更新时间：2023-09-26

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

当前 js：

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

示例页面

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

如果你对动画不大惊小怪，并且希望使用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()等动画将不起作用。

菜单

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

这样用

法 
<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>
相关文章：