特に絞り込まれていない、またはより大きなコミュニティにとって有益ではない質問について、前もってお詫び申し上げます。この問題を修正するのは、個人の正気の問題です。
私はウェブサイトに取り組んでおり、ソーシャル ドロワーを作成しました。基本的に、ソーシャル メディアのタブにカーソルを合わせると、わずかに左に移動します。クリックすると、SocMedia フィードが入った引き出しが開きます。
FF、Chrome、Safari で問題なく動作します。IE9 では何も起こりません。最初にドロワーを作成したときは IE で問題なく動作しましたが、サイトの開発を続けていると、どうやらそれと競合するものがあるようです。しかし、これは単なる JS の競合ではありません。なぜなら、CSS のホバー機能でさえ機能せず、実際、最小限の jQuery を使用してこの効果を達成しているからです。CSS はほとんどのリフティングを行っています。
また、IE では CSS3 トランジションが機能しないことも認識しており、IE でのスムーズな動きについては気にしていません。
とにかく、サイトへのリンクはここにあります。エイジ ゲートを過ぎると、メニューの下の右上隅にソーシャル ドロワーが表示されます。最初に非 IE ブラウザーで試して、どのように動作するかを確認してください。
HTML:
<div id="social_drawer">
<div id="twitter_drawer" class="drawer_pull"></div>
<div id="tw_drawer" class="drawer"> </div>
<div id="facebook_drawer" class="drawer_pull"></div>
<div id="fb_drawer" class="drawer"></div>
<div id="google_drawer" class="drawer_pull"></div>
<div id="gl_drawer" class="drawer"></div>
</div>
これが私のjQueryです：
<script type="text/javascript">
$('#facebook_drawer').click(function() {
$(this).toggleClass('open');
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#fb_drawer').toggleClass('open');
});
$('#twitter_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#tw_drawer').toggleClass('open');
});
$('#google_drawer').click(function() {
$(this).toggleClass('open')
$('.drawer_pull').not(this).toggleClass('hidden');
$('#social_drawer').toggleClass('open');
$('#gl_drawer').toggleClass('open');
});
</script>
CSS は次のとおりです。
#social_drawer {
width: 36px;
height: 450px;
background: url(images/tab_shadow.png) right top no-repeat;
position: absolute;
z-index: 1000;
right: -7px;
/*box-shadow: -10px 0 27px -13px #000000 inset;*/
padding-top: 25px;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
overflow: hidden;
}
#social_drawer.open {
width: 375px;
box-shadow: none;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
}
#social_drawer .drawer {
background: #fff;
width: 0px;
height: 400px;
position: absolute;
z-index: 1000;
left: 29px;
right: auto;
box-shadow: 0px 0 21px -5px #000000 inset;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
opacity: 0;
border: none;
}
#social_drawer #fb_drawer.drawer.open {
border: 3px solid #336699;
}
#social_drawer #tw_drawer.drawer.open {
border: 3px solid #6699cc;
}
#social_drawer #gl_drawer.drawer.open {
border: 3px solid #d94c2c;
}
#social_drawer .drawer.open {
left: auto;
right: 0;
transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
display: block;
opacity:1;
width: 295px;
padding: 21px;
}
#social_drawer .drawer_pull {
width: 30px;
height: 31px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
cursor: pointer;
padding: 3px 0;
position: absolute;
right: 0;
z-index: 5000;
}
#social_drawer.open .drawer_pull.open {
left: 0;
width: 36px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
}
#social_drawer.open .drawer_pull.hidden {
float: right;
width: 30px;
margin-right: -30px;
transition: all .3s linear 0s;
-moz-transition: all .3s linear 0s;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
opacity: 0;
}
#social_drawer .drawer_pull:hover {
width: 36px;
}
#facebook_drawer {
background:url(images/social/facebook_drawer.png) left no-repeat;
top: 60px;
}
#twitter_drawer {
background:url(images/social/twitter_drawer.png) left no-repeat;
}
#google_drawer {
background:url(images/social/google_drawer.png) left no-repeat;
top: 95px;
}
最初は z-index の問題だと思っていましたが、多くの z-index の組み合わせを試し、ソーシャル ドロワーを別の div の内外に移動しても効果がありませんでした。それはおそらく私が見落としているマイナーなものだと確信しています。
私より賢い人助けてください！私の正気は危機に瀕しています。前もって感謝します。さらに情報を提供する必要がある場合はお知らせください。