0

私はスマートフォン用のレスポンシブドロップダウンナビゲーションを作成しようとしています.thingdはトグルボタンをクリックする前に正常に動作しますが、それをクリックした後、ナビゲーションもより大きなワイドに隠されました.これは電話の画面では明らかではないことを知っています.それはユーザーが使用している画面サイズであり、実際にはそのデバイスでワイド画面サイズに切り替えることができないためですが、問題のロジックとそれを防ぐ方法を知りたいです。ここに私のHTMコードがあります:

<a id="toggleMenu" href="#">Welcome</a>
   <ul class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">Portfolio</a></li>
        <li><a href="/work/">About Us</a></li>
        <li><a href="/clients/">Recent Work</a></li>
        <li><a href="/contact/">Contact</a></li>
   </ul>
<div class="banner"></div>

CSS:

@media screen and (max-width: 768px) { 
.nav {
  border: 0px solid #ccc;
  border-width: 0px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display:none;
}
.nav li {
  display: block;
  border: 1px solid #ccc;
  width:310px;
  background:#175e4c;
}
#toggleMenu {
  display:  inline-block;
  list-style: none;
  width:281px;
}

そして最後にjQuery

$(document).ready(function() {
 $("#toggleMenu").click(function () {
 $('.nav').slideToggle();
 });
});
4

1 に答える 1

1

私は同じ問題を抱えています。

これを修正するためにJavaScriptに追加したものは次のとおりです。

$(window).resize(function() {
    if($(window).width() > 480) // or 768
        $('#.YourMenuIdOrClass').show();
});

ただし、コードで 480 を 768 に変更することもできます。

于 2013-02-13T19:49:31.090 に答える