前提・実現したいこと
ツイッターボタンを表示したい
発生している問題
ツイッターボタンが表示されない。
今回のケースでは『ツイッターボタンを非表示状態にしておき、クリックイベント発火でツイッターボタンを表示させる』
という実装が前提です。
ただしこの場合ツイッターボタンが表示されません。
調査したところ恐らくツイッターボタン非表示状態を作り出すためにdisplay: none;
を設定していることが原因のようです。
例えば非表示状態を作り出すのにvisibility: hidden;
やopacity: 0;
の場合だと問題なくクリックイベント発火後に表示されることを確認しています。
該当のソースコード
html
1<button class="trigger">クリック</button> 2<div class="sns"> 3 <a href="http://twitter.com/share" class="twitter-share-button" data-text="***" data-url="***" data-lang="ja">Tweet</a> 4 <script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8" ></script> 5</div>
css
1.sns { 2 display: none; 3}
試したこと
html
1<button class="trigger">クリック</button> 2<div class="sns"> 3 <a href="http://twitter.com/share" class="twitter-share-button" data-text="***" data-url="***" data-lang="ja">Tweet</a> 4 <script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8" ></script> 5</div>
css
1.sns { 2 visibility: hidden; 3} 4/* または */ 5.sns { 6 opacity: 0; 7} 8
補足情報
既に判明してる通りツイッターボタンを非表示状態を作り出すためにはdisplay: none;
ではなく、visibility: hidden;
やopacity: 0;
を使用すればこの問題を解消することが分かっているのですが、ツイッターボタン要素の前後にある要素設計を考慮し、可能であれば、display: none;
の状態でもクリックイベント発火後に表示させたいのです。
何かいい方法はありますでしょうか?
知見をお伺いできれば幸いです。
よろしくお願いいたします。
クリックイベントコード
javascript
1$('.trigger').on('click', function() { 2 $('.sns').show(); 3});
回答1件
あなたの回答
tips
プレビュー