0

嗨，我有一些代码在加载时隐藏了我的共享按钮，当我将鼠标悬停或单击共享按钮时，它会向下滑动。但是，在我可以点击这些按钮之前，它们会消失吗？

谁能帮我完成这个过渡吗？

我的代码在下面或访问我的jsFiddle

索引.html

<ul class="nav">
    <li><a href="#">ICON ONE</a></li>
    <li><a href="#">ICON TWO</a></li>
    <li class="share"><a href="#" id="share">SHARE ICON</a></li>
</ul>
              <ul class="sharenav">
                    <li><a href="#">FB</a></li>
                    <li><a href="">TWITTER</a></li>
                    <li><a href="#">GOOGLE +</a></li>
                  <li><a href="#">SU</a></li>
                  <li><a href="#">LINKEDIN</a></li>
                </ul>

js/js.js 

$('.sharenav').hide();
$('.share').on('click mouseover', function () {
    $('.sharenav').show().slideDown('slow');
}).mouseleave(function () {
    $('.sharenav').stop().slideUp('slow');
});
4

4 回答 4

2

试一试（请注意，我已删除.show()，因为.slideDown()这样做）：

$('.sharenav').hide();

$('.share').on('click mouseover', function () {
    $('.sharenav').slideDown('slow');
});
$('.share').mouseleave(function () {
    $('.sharenav').slideUp('slow');
});
$('.sharenav').on('click mouseover', function () {
    $(this).stop();
    return false;
});
$('.sharenav').mouseleave(function () {
    $(this).slideUp('slow');
});

jsFiddle：http: //jsfiddle.net/2JuJF/6/

于 2013-10-07T10:40:12.647 回答
0

您需要将mouseLeave事件更改为sharenav元素，以便它仅在您离开子菜单后隐藏。

例子

$('.sharenav').hide();
$('.share').on('click mouseover', function() {
    $('.sharenav').show().slideDown('slow');
});
$('.sharenav').mouseleave(function(){
    $(this).stop(true, true).slideUp('slow');
});

见jsFiddle

更新

您还可以添加延迟，以便如果您不将鼠标悬停在子菜单上，它会在 3 秒后自行关闭。这可以通过delay

例子

$('.sharenav').hide();
$('.share').on('click mouseover', function () {
    $('.sharenav').show()
        .slideDown('slow')
        .delay(3000)
        .slideUp('slow');
});
$('.sharenav').mouseleave(function () {
    $(this).stop().slideUp('slow');
});

jsFiddle

最终更新

一旦您添加了延迟以关闭子菜单（如果它已打开但未悬停在其上），您将需要在将鼠标悬停在子菜单上时停止此隐藏动画。

例子

$('.sharenav').hide();
$('.share').on('click mouseover', function () {
    $('.sharenav').show().slideDown('slow').delay(3000).slideUp('slow');
});
$('.sharenav').on('mouseover', function(){
    $(this).stop(true, true);
})
.mouseleave(function () {
    $(this).stop().slideUp('slow');
});

jsFiddle

于 2013-10-07T10:19:05.083 回答
0

这是另一个建议：

  $('.sharenav').hide();
  $('.share').on('click mouseover', function() {
     $('ul.active').hide();
     $('.sharenav').addClass('active').slideDown('slow');     
  })
   $(window).on("click hover resize", function (e) {
      $('.sharenav').stop().slideUp('slow');
  });

在您不单击任何其他窗口区域之前，这些链接将保持可见。我不确定这对您是否可行！

演示

于 2013-10-07T11:05:58.100 回答
0

您可以将其添加到您的代码中，以确保sharenav当您将鼠标悬停在它上面时保持可见：

$('.sharenav').on('mouseover', function() {
    $('.sharenav').stop().show();
}).mouseleave(function() {
    $('.sharenav').stop().slideUp('slow');
});
于 2013-10-07T10:41:54.740 回答