始终在桌面上显示div并在移动屏幕上切换。

Question

我有两个DIVs，一个被用作按钮，仅显示在移动屏幕上，另一个包含我希望始终在桌面上可见的信息，并且可以使用Show/hide按钮在移动上切换。

在移动环境下，信息应该首先被隐藏起来。问题是当我将信息隐藏在480 it以下的屏幕上时，它在480 it上方的屏幕上是不可见的。

通过单击“显示/隐藏”按钮隐藏信息，然后在屏幕上显示您会发现的屏幕，我希望信息在这种情况下是可见的。

这是我的密码

​

$(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

​

$(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>

​