Javascript菜單向左移動並露出Android設備瀏覽器屏幕右側的空白

當我在移動設備上查看時，我的網站有一個非常基本的菜單。它的功能與所有瀏覽器中的完全相同。就像我說的那樣，它在所有瀏覽器中都可以使用。它打開和切換關閉divs。問題在於，在默認的Android瀏覽器中，當您第一次打開菜單時，它會向左移動並在菜單右側顯示一個很大的間隙。這就像菜單的寬度在縮小。如果我關閉並重新打開菜單，則菜單將具有所需的100％寬度。它不會在Firefox Android瀏覽器中執行此操作。只是默認的瀏覽器。除了寬度較小外，其他所有內容都很好Javascript菜單向左移動並露出Android設備瀏覽器屏幕右側的空白

菜單通常以某種方式掛起。當關閉與容器內的切換相關聯的菜單容器時，屏幕上的內容會「掛起」。「屏幕上留有一些divs，這可能與slideToggle有關嗎？如果我只是簡單地使用它常用的切換？

這裏是我的js

 $(document).ready(function(){ 

       $("#mobilemenu").hide(); 
       $("#mobilemenu-drop").show(); 

      $('#mobilemenu-drop').click(function(){ 
      $("#mobilemenu").slideToggle(); 
      return false; 
      }); 

     }); 

     $(document).ready(function(){ 

       $("#cats").hide(); 
       $(".show_cats").show(); 

      $('#mobilemenu-catdrop').click(function(){ 
      $("#cats").slideToggle(); 
      return false; 
      }); 

     });

這裏是我的html

<header> 
     <h1>title</h1> 

    <span class="right"> 
     <div id="mobilemenu-drop"> 
      click 
     </div> 
    </span> 
</header> 

<div id="mobilemenu"> 
    <ul> 
     <li><a href="#">one</a></li> 
     <li><a href="#">two</a></li> 
     <li><a href="#">three</a></li> 
    </ul> 

    <div id="mobilemenu-catdrop"> 
     <span>Second drop</span> 
    </div> 

    <div id="cats">cats 
     drop content 
    </div> 
</div>

的菜單contaiiners的CSS是這個

#mobilemenu { 
    width: 100%; 
    background: #2e97de; 
    border-top: #8dc8f2 1px solid; 
}]

來源

2013-08-31 stevenmw

我也有這個問題。

我的工作方式（迄今爲止工作）是設置寬度@ 102％，並將溢出-x：隱藏;

這會將其擴展到右側（因爲瀏覽器默認從左到右工作），但是如果它從左側延伸，則可能需要設置margin-left：0px;甚至-1px;

來源

2013-08-31 02:51:54

Javascript菜單向左移動並露出Android設備瀏覽器屏幕右側的空白

回答

相關問題