Question

我在代码中放入了一些媒体查询，以说明屏幕分辨率是否小于768像素； .sideBar像这样消失，剩下.main部分。

# Place your local configuration in /etc/mosquitto/conf.d/
#
# A full description of the configuration file is at
# /usr/share/doc/mosquitto/examples/mosquitto.conf.example

pid_file /var/run/mosquitto.pid

persistence true
persistence_location /var/lib/mosquitto/

log_type all
log_dest file /var/log/mosquitto/mosquitto.log

# Goolge IoT Core Configuration

connection bridge-to-gcp

address mqtt.googleapis.com:8883

bridge_attempt_unsubscribe false
bridge_certfile /home/pi/certificates/rsa_cert.pem
bridge_keyfile /home/pi/certificates/rsa_private.pem
bridge_cafile /home/pi/certificates/roots.pem
bridge_protocol_version mqttv311
bridge_insecure false

tls_version tlsv1.2
try_private true

start_type automatic
cleansession true
notifications false

local_clientid local-to-remote-gcp-bridge

remote_username unused
remote_password <JWT Token generated using jwt.io>
remote_clientid projects/project-251313/locations/europe-west1/registries/prot/devices/ebusd12345

topic # both

include_dir /etc/mosquitto/conf.d

我想要实现的是当屏幕分辨率达到这样的水平时，我希望出现一个汉堡图标，使我可以切换打开/关闭.sideBar。

我该如何在代码方面解决这个问题？

如果以前有类似的教程，请附加。

随附原始代码：

1542622526: Connecting bridge bridge-to-gcp (mqtt.googleapis.com:8883)
1542622526: Bridge projects/project-251313/locations/europe-west1/registries/prot/devices/ebusd12345 sending CONNECT
1542622526: Socket error on client local.projects/project-251313/locations/europe-west1/registries/prot/devices/ebusd12345, disconnecting.

@media (max-width: 768px) {
    .sideBar {
        display: none !important;
    }
}

谢谢汤姆

Answer 1

我想这就是您要寻找的内容，为了清晰起见，我拍摄了Google地图iframe，并用div包装。然后，我切换wrapper进行图标点击。

这里是codepen

$(document).ready(function() {
  $('.mobile-menu-icon i.open').click(function() {
    $('.sidebar-wrapper').fadeIn();
    $(this).hide();
    $('.mobile-menu-icon i.close').fadeIn();
  });

  $('.mobile-menu-icon i.close').click(function() {
    $('.sidebar-wrapper').fadeOut();
    $(this).hide();
    $('.mobile-menu-icon i.open').fadeIn();
  });
});

.mobile-menu-icon i.close {
  display: none;
}

@media (min-width:768px) {
  .mobile-menu-icon {
    display: none;
  }
}

@media (max-width:767px) {
  .mobile-menu-icon {
    display: block;
  }
  .sidebar-wrapper {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
  <!-- sideBar featuring Profile, myEd News and directory -->
  <div class="mobile-menu-icon">
    <i class="fa fa-bars open" aria-hidden="true"></i>
    <i class="fa fa-times close" aria-hidden="true"></i>
  </div>
  <div class="sidebar-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    <!-- myEd News -->
  </div>
</div>

使用媒体查询切换sideBar（iFrame）

1 个答案: