1

これは、私が書いたドロップダウンメニューのデモを示すフィドルです。

問題：

スクリーンショット

ドロップダウン メニュー (「チャネル」) の下にあるテキストの一部 (この場合はサイト タイトル リンク) は選択またはクリックできませんが、通常の「ホーム」リンクの下の他の部分は問題なく表示されます。(デモで試すことができます。)

これが起こっていると思う理由:私は JavaScript を使用して、メニュー (「チャネル」) がクリックされたときに と の値heightを0動的に変更します。autoのようなものdisplay: none;ではないため、menu-item 要素は非表示になるだけで、その下にあるテキストは選択不可/クリック不可になります。

スクリーンショット

問題は、メニューの現在の機能とスタイル (つまり、ドロップダウン) を壊さずに、これを修正するにはどうすればよいかということですtransition。、 、およびを含むdisplay: none | block;、私が試したすべてが失敗しました。visibility: hidden | visible;opacity: 0 | 1;

編集: Google Chrome および Chromium Web ブラウザーの最新バージョンで見られるように。

4

2 に答える 2

1

FFで働く

何らかの理由で子要素（of#channels-menu-item-wrapperoverflow:hidden ）が親の使用を尊重しないChromeの場合（視覚的な方法でのみ非表示を尊重します..）

遅延トランジションを使用して、サブ要素を邪魔にならないように移動できます..

.collapse > div{
    position:relative;

}
.collapse:not(.in) > div {
    left:-10000px;    
    -webkit-transition:left 0s ease;
    -webkit-transition-delay:0.35s; /*same delay as the time it takes to open/close so it does not show*/
}

(私は-webkit-ベンダー固有のルールを追加しただけです..すべてに適用されます)

http://jsfiddle.net/gaby/cfH33/5/のデモ

于 2012-12-22T17:47:15.133 に答える
0

メニューをクリックしたときに、スクリプトを使用して.collapse div の高さと幅を 0 に設定します。

更新: @Gaby の回答から、このヒント ".collapse:not(.in)" が得られました。

.collapse:not(.in){
    width:0;
 }

これも機能します。http://jsfiddle.net/8Mde7/3/

これが width:0 を設定した意味です。

于 2012-12-22T18:07:30.507 に答える