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

jQuery コマンドの詳細についてはtoggle、このリンクhttp://api.jquery.com/toggle/にアクセスしてください。

于 2013-08-21T01:04:23.420 に答える