Question

我有一个子导航（.nav-sub-wrapper），当前加载隐藏，只应在移动/平板电脑设备上触发时显示。我已将div设置为display:none，但在移动设备/平板电脑设备上无法将其切换为可见或display:block。我还设置div加载隐藏的jQuery，但再次无法在移动/平板电脑设备上显示div切换。

if($(window).width() == '768'){
  $(".nav-sub-wrapper").hide();

  $(".hamburger").on('click', function(){
    $(".nav-sub-wrapper").toggle();
  });
}

Answer 1

我看到你在测试中使用了==，你是否尝试将＆lt; =代替。然后你将768表示为字符串而不是数字，尝试更改它。此外，如果您在桌面浏览器上测试您的网站，也许您可以尝试将代码放入.resize（），如下所示：

<!doctype html>
<html>
<head>
    <title>test</title>
    <style>
      .nav-sub-wrapper {
        height: 100px;
        width: 100px;
        background-color: blue;
      }

      .hamburger {
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        height: 25px;
        background-color: red;
      }
    </style>
</head>
<body>
    <div class="nav-sub-wrapper"></div>
    <div class="hamburger"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.js"></script>
    <script>

      function navHidden() {
        if($(window).width() <= 768){
        $(".nav-sub-wrapper").hide();
        $(".hamburger").on('click', function(){
        $(".nav-sub-wrapper").toggle();
        });
       }else{
        $(".nav-sub-wrapper").show();
       }
      }

      $( window ).resize(function() {
       navHidden();
      });

      $( document ).ready(function(){
        navHidden();
      });

    </script>
</body>
</html>

我还添加了一个else条件，因此.nav-sub-wrapper显示回超过768px宽。您可以在导航器中尝试此操作并告诉我它是否符合您的预期; - ）

Answer 2

您可以使用媒体查询使用css本身。

@media screen and (max-width: 768px) {
    .nav-sub-wrapper {
        display:block;
    }
}

您还可以使用引导类隐藏/显示特定屏幕尺寸的内容

以下类仅在屏幕宽度小于768px的设备上可见。

visible-xs-block

这是documentation

Answer 3

我使用媒体查询进行显示。如果汉堡只有在合适尺寸时才能看到，那么你甚至不需要另一个。

＆＃13;

$(document).ready(function() {
  $(".hamburger").on('click', function() {
    $(".nav-sub-wrapper").toggle();
  });
})

＆＃13;

.nav-sub-wrapper {
  display: none;
}

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-sub-wrapper">
  here</div>
<input type=button value=hamburger class="hamburger" />

＆＃13;

如何将div从显示无切换到可见

3 个答案: