Question

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

当前的js：

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

Sample page

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

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

使用visiblity意味着该元素仍然会消耗它在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");
   });
});

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

3 个答案: