Question

我有两个DIV，一个用作按钮，仅在移动屏幕上显示，另一个包含我希望在桌面上始终可见的信息，可以使用显示/隐藏按钮在移动设备上切换。

在移动设备上，最初应隐藏信息。问题是当我将信息隐藏在480px以下的屏幕上时，它在480px以上的屏幕上不可见

点击显示/隐藏按钮隐藏信息，然后消耗你会在屏幕上看到的屏幕，我希望在这种情况下可以看到信息。

这是我的代码

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggle();
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}

.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

Answer 1

点击显示/隐藏按钮隐藏信息然后消耗你会在屏幕上看到的屏幕，我希望在这种情况下可以看到信息

这种行为是因为toggle()调用直接向元素添加了style属性，这很难用CSS覆盖，当媒体查询状态发生变化时需要它。

要解决此问题，请改用toggleClass()。然后，您可以在媒体查询之外忽略此类，以便始终显示该元素。

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggleClass('toggle');
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}
.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
  .information.toggle {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

您可以使用此example fiddle在调整窗口大小时查看效果。

Answer 2

$(document).ready(function() {
      $('.show-hide').click(function() {
        $(this).next().toggle();
      });
   
  

  $( window ).resize(function() {
    if( $( window ).width()>480){
      $('.information').toggle(true);
    }else{
      $('.information').toggle(false);
    }
    });
    });

.show-hide {
      background-color: #ffa2a2;
      padding: 8px;
      display: none;
    }

    .information {
      background-color: #a4dca4;
      padding: 8px;
    }

    @media only screen and (max-width: 480px) {
      .show-hide {
        display: inline-block;
      }
      .information {
        display: none;
      }
    }
    @media only screen and (min-width: 480px) {
      .show-hide {
        display: none;
      }
      .information {
        display: block;
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="show-hide">Show/Hide Info</div>

    <div class="information">
      Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
    </div>

始终在桌面上显示div并在移动屏幕上单击鼠标左键

2 个答案: