1

Google Chromeデスクトップとモバイルバージョンの両方でウェブサイトをテストしましたが、スライドアウトメニューのラベルが表示されていないようです。それは機能します、それはただ表示されません、そして私は理由がわかりません。私が使用しているスライドアウトデザインは位置に依存しているため、位置の変更はここでは機能しません。位置を変更する必要がありますfixed。

関連するCSS：

#slideout #label {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    display:block;
    float:right;
    margin:46% 0 0 0;
    padding: 0 2px 6px 2px;
    font-size: 20px;
    position: fixed;
    left:-36px;
    -webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    background-color:#fff;
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
}

#slideout.opened #label {
    left: 86px;
}

JavaScript：

$('#label').on('click',function(){
    $('#slideout').toggleClass('opened');
});

編集：私はこのコードを使用してみました：

#slideout #label {
    position: absolute;
    left: 90px;
}
#slideout {
    position: relative;
}

しかし、何が起こるかというと、ラベルは正しい場所にありますが、切り取られて見えません。

4

5 に答える 5

2

position：fixedはモバイルでは予測できません。position：relativeに切り替えることで修正できるはずです。それは難しいかもしれませんが。ここにこれに関するいくつかのまともな報道があ​​ります：http ：//www.quirksmode.org/blog/archives/2012/10/budding_consens.html

于 2013-01-28T22:47:05.970 に答える
1

スライドパネルの不透明度プロパティを確認します。

パネルを非表示にするときに不透明度を0.3に設定すると、ラベルがパネルの内側にあるため、ラベルもフェードします。

しかし、Chromeモバイルと不透明度のプロパティに問題があるようです。ボタンが完全に消えます。パネルの外に置いてみてください。Chromeインスペクターでスライドパネルの不透明度：0.3を無効にすると、ラベルが表示されます。

これを調べてみるべきだと思います。

于 2013-02-02T17:49:31.690 に答える
0

あなたが持っているものに加えて、以下を試してください：

#slideout {
    position: relative;
}
#slideout #label {
    position: absolute;
    top: 46%;
    right: -10px; (approximate)
}

明らかに、これらはカップルのオーバーライドなので、あなたの裁量でそれらを統合してください。また、フロートを削除します。

于 2013-02-01T03:19:23.500 に答える
0

これは単なる推測ですが、問題は、イベントが実際には異なるため、モバイルでは異なるjavascriptイベント処理に起因する可能性があります。クリックイベントはモバイルで2回トリガーされると思います。たとえば、「touch」や「mousedown」などです。したがって、イベントが2回発生すると、toggleClass（）は必要なクラスを追加および削除します。したがって、正しいイベントを追加するためにjavascriptでモバイルを検出します 。モバイルブラウザの検出（モバイルの検出） jQuery mobile（クリックイベント）（適切なイベント）またはタイマーで「addClass」と「removeClass」のトグルクラスを変更します。何かのようなもの

var animating = false;
var open = false;
$('#label').on('click',function(){
   if (!animating) {
       animating = true;
       if (open) {
          $('#slideout').removeClass('opened');
       } else {
          $('#slideout').addClass('opened');
       }
       setTimeout(function() { animating = false }, 500); // 500 = 0.5s of css animation
   }
});

お役に立てれば。

于 2013-02-01T15:03:28.170 に答える
0

それぞれのwidth-heightプロパティとともに、cssでpostion：fixedを使用します。

于 2013-02-01T18:25:51.100 に答える