如何将 div 从不显示切换为可见答案

【问题标题】：How to toggle div from display none to visible如何将 div 从不显示切换为可见
【发布时间】：2016-05-18 20:44:15
【问题描述】：

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

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

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

【问题讨论】：

你的框架使用 Bootstrap 吗？
您可以尝试添加一个使其可见的类...
我尝试过同时使用.hidden-md-down 并为仅切换display:block 的div 切换一个类，但这也不起作用。
媒体查询不是更好吗？
我对@RobA 的建议还不够。使用实际的 CSS 更改 CSS 属性比依赖启用/工作的 JS 要容易得多。

标签： jquery css

【解决方案1】：

我看到您在测试中使用 ==，您是否尝试使用

<!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 宽。您可以在导航器中尝试此操作，并告诉我它是否符合您的预期；-)

【讨论】：

这不起作用。将窗口大小调整为 768px 或以下时，div 仍然显示。
我能够让它大部分在控制台中工作，但在将它与我的代码合并时遇到了一些麻烦，而没有将所有内容锁定在导航隐藏功能中。我已经用该断点的所有代码编辑了我的问题，没有您的更新。你能提供一个混合溶液的样品吗？
看来@Lou 已经回答了你的问题。更新答案以包含您庞大的代码库将使这个问题对未来的访问者毫无用处。如果您需要进一步帮助将其添加到您的生产代码中，我建议您提出另一个问题，或者雇用他为您完成这项工作。 ;)
@Lou - 这部分有效，因为它隐藏了导航，但现在单击汉堡包 div 时会禁用 nav-sub-wrapper。

【解决方案2】：

我会使用媒体查询来显示。如果汉堡包只有在大小合适时才可见，那么你甚至不需要另一个。

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

.nav-sub-wrapper {
  display: none;
}

.hamburger {
  display: none;
}

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

<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" />

【讨论】：

【解决方案3】：

您可以通过使用媒体查询来处理 css 本身。

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

您还可以使用引导类在某些屏幕尺寸上隐藏/显示内容

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

visible-xs-block

这是documentation

【讨论】：