0

所以，我正在尝试创建一个社交媒体翻转，但由于某种原因，我无法让它发挥作用。我试图让它，当我点击一个链接时，显示一个充满社交媒体图标的 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>

我能得到一些帮助吗？

4

1 回答 1

2

你在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');
      });

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

于 2013-08-21T01:04:23.420 回答