Question

移动响应下拉导航栏可在小宽度浏览器上使用，但不能在我的手机上使用。当我使浏览器的宽度小于1000像素并单击下拉菜单元素时，将显示菜单，但是，当我尝试在手机上打开菜单时，什么也没有发生。我完全不知道是什么原因造成的，因为我之前从未尝试过使网站具有响应能力，因此我对此一无所知。

$('.dropdown').on('click', function() {
  $('.container').children().toggle();
  $('.dropdown').show();
  $('.space').hide();
});

.navigation {
  background-color: #151719;
}

.container {
  display: flex;
}

.container>li {
  padding: 10px;
  text-align: center;
  font-size: 1em;
  color: white;
  box-sizing: border-box;
  background-color: #151719;
  list-style-type: none;
}

.space {
  flex: 1;
}

.dropdown {
  display: none;
}

@media all and (max-width: 1100px) {
  .container {
    flex-wrap: wrap;
  }
  .container>li {
    flex: 1 1 100%;
  }
  .space {
    display: none;
  }
  .dropdown {
    display: block;
  }
  .container>li {
    display: none;
  }
  .container>.dropdown {
    display: block;
    cursor: pointer;
  }
  .dropdownImg {
    float: right;
  }
}

@media only screen and (max-width: 600px) {
  .flex-grid-home {
    display: none;
  }
  .flex-grid {
    display: block;
  }
  .flex-grid {
    margin-right: 10px;
    margin-left: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="container">
      <li class='dropdown'></li>
      <li class='ey'><a href="">1</a></li>
      <li class='ey'><a href="">2</a></li>
      <li class='ey'><a href="">3</a></li>
      <li class='ey'><a href="">4</a></li>
    </ul>
  </div>
</nav>

Answer 1

我建议您检查是否在标题中添加了以下行：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

如果未添加，请在标题部分添加以上代码。

<head>
<title>sample header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

移动响应下拉导航栏可在小宽度浏览器上使用，但不能在我的手机上使用

1 个答案: