Question

所以，我正在尝试创建一个社交媒体翻转，但由于某种原因，我无法让它工作。当我点击一个链接时，我正试图将它显示出一个带有链接的社交媒体图标div（最好有一个很好的动画，但我还没有尝试过，因为这不起作用）。我宁愿使用jQuery切换，但是，我甚至无法让它工作，所以看起来更复杂的东西似乎毫无意义。

<!DOCTYPE html>
<html>
<head>
    <title>Rollover Test</title>
    <script src="jquery.min.js"></script>
    <style>
        #one {
            background-image: url('fb.png');
        }
        #two {
            background-image: url('twt.png');
        }
        #three {
            background-image: url('g+.png');
        }
        #four {
            background-image: url('rss.png');
        }
        #five {
            background-image: url('irc.png');
        }
    </style>
    <script>
        $(function() {
            $('#socialS').hide();
            $('#clickElement').click(function() {
                $('#socialS').show();
            }
        });
    </script>
</head>
<body>


<div id="socialS">
    <a href=""><div id="one"></div></a>
    Test

    <a href=""><div id="two"></div></a>

    <a href=""><div id="three"></div></a>

    <a href=""><div id="four"></div></a>

    <a href=""><div id="five"></div></a>

</div>

<a href="" id="clickElement">Click me!</a>
Test

</body>
</html>

我可以帮忙吗？

Answer 1

你在javascript代码中有错误

$(function() {
      $('#socialS').hide();
      $('#clickElement').click(function(e) {
           // make sure you preventing browser to follow link
           e.preventDefault();
           $('#socialS').show();
      }); // was missing brackets
});

始终检查控制台是否有错误。

<强>更新

最简单的切换方式是使用toggle功能，即

$('#socialS').toggle('fade');

以上还将提供动画。我建议你也相应地更新css

// Always choose `css` instead of javascript where possible.    
#socialS {
    display: none;
}

现在你可以做这样的事情，不需要手动隐藏#socialS元素。

      // caching element
      var $social = $('#socialS');
      $('#clickElement').click(function(e) {
          // make sure you preventing browser to follow link
          e.preventDefault();
          $social.toggle('fade');
      });

要获取有关jQuery toggle命令的更多详细信息，请访问此链接http://api.jquery.com/toggle/

jQuery .show（）/ .hide（）在Social Rollover中不起作用

1 个答案: