0

こんにちは、ロード時に共有ボタンを非表示にするコードがいくつかあります。共有ボタンにカーソルを合わせるかクリックすると、これが下にスライドします。しかし、これらのボタンにアクセスしてクリックする前に、それらは消えますか?

この移行を正しく行うのを手伝ってくれる人はいますか?

私のコードは以下か、私の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');
});
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

これをコードに追加して、sharenavカーソルを合わせたときに常に表示されるようにすることができます。

$('.sharenav').on('mouseover', function() {
    $('.sharenav').stop().show();
}).mouseleave(function() {
    $('.sharenav').stop().slideUp('slow');
});
于 2013-10-07T10:41:54.740 に答える
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 に答える