Question

您好我有一些代码在加载时会隐藏我的共享按钮，当我悬停或点击分享按钮时，它会向下滑动。然而，在我点击这些按钮之前，它们会消失吗？

有人可以帮我解决这个转变吗？

我的代码位于下方或访问我的jsFiddle

的index.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');
});

Answer 1

尝试使用此功能（请注意我已移除.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/

Answer 2

您需要将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

Answer 3

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

$('.sharenav').on('mouseover', function() {
    $('.sharenav').stop().show();
}).mouseleave(function() {
    $('.sharenav').stop().slideUp('slow');
});

Answer 4

这是另一个建议：

  $('.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');
  });

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

demo

jQuery导航隐藏之前我可以找到未隐藏的元素

4 个答案:

更新

最终更新