我试图让我的custInfoDiv浮动当窗口低于420px 和 时，右边的导航栏显示在块中。
现在我无法弄清楚出了什么问题，我没有控制台错误，也许这是我错过的一些简单。
由于某些原因，代码段也无法正常工作...颜色和正确的CSS样式没有显示，但这不是导致实际问题的原因。
// right nav
const toggle = document.getElementById('toggle');
const rightNav = document.getElementById('rightNav');
const searchNav = document.getElementById('searchNav');
toggle.addEventListener('click', () => {
if (rightNav.style.display === 'none') {
rightNav.style.display = 'block';
} else {
rightNav.style.display = 'none';
}
});
// modal
const notesTab = document.getElementById('notesTab');
const modal = document.getElementById('modal');
const close = document.getElementById('close');
notesTab.addEventListener('click', () => {
modal.style.display = "block";
});
close.addEventListener('click', () => {
modal.style.display = "none";
});
window.addEventListener('click', (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
});
// div
const custInfoDiv = document.getElementById('custInfoDiv');
const mql = window.matchMedia("(max-width: 420px)");
if (window.matchMedia("(max-width: 420px)").matches & (rightNav.style.display = "block")) {
custInfoDiv.style.float = "left";
} table {
margin: 0 auto;
}
h4 {
text-align: center;
color: white;
}
#custInfoDiv {
width: 220px;
margin: 0 auto;
}
@media (max-width: 420px) {
}
/* modal */
.modal {
color: white;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 200px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* background color for everthing behind div like body */
}
#close {
float: right;
margin: 5px 5px 0 0;
}
#notes {
background-color: #595959; /* background color for content. */
border-radius: 10px;
border-bottom: 5px solid #3b3b3b;
height: 100px;
width: 300px;
margin: 0 auto;
text-align: center;
}
// main
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
// Variables
$opensans: 'Open Sans', sans-serif;
// Resets
// Main Elements
body {
font-family: $opensans;
background-color: #5790ff;
}
#nav {
display: flex;
position: fixed;
width: 100%;
padding: 10px;
background-color: #797979;
border-bottom: 5px solid #5b5b5b;
}
#nav h3 {
margin: 0;
}
#nav ul {
display: inline-flex;
list-style-type: none;
margin: 0;
}
#nav li {
margin-right: 5px;
}
#toggle {
display: none;
border-radius: 5px;
color: white;
background-color: #494949;
border: 1px solid #494949;
}
#rightNav {
margin-top: 2px;
color: white;
display: none;
width: 100px;
position: fixed;
right: 0;
height: 100%;
background-color: #494949;
border-left: 5px solid #2b2b2b;
}
#rightNav ul {
padding: 0 0 0 10px;
list-style-type: none;
}
#rightNav ul li{
margin-top: 10px;
}
tr:nth-child(even) {
background-color: #e2e2e2;
}
#typeSearch {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 2px solid white;
}
#addCust {
color: white;
background-color: #494949;
border: 2px solid #494949;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
@media (max-width: 630px) {
#rightNav {
display: block;
}
#searchNav, #navList {
display: none;
}
#toggle {
display: block;
}
}
// Misc<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>hardwareapp</title>
<link rel="stylesheet" href="css/styles.scss">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="css/styles.min.css.map">
</head>
<body>
<nav id="nav">
<h3>Customer</h3>
<div id="navList">
<ul>
<li>Home</li>
<li>Link</li>
<li>Disabled</li>
</ul>
</div>
<div id="searchNav" style="position: fixed; right: 5%;">
<input type="text" placholder="search"></input>
<button type="button">search</button>
</div>
<div id="toggle" style="position: fixed; right: 5%;">
<button id="toggle" style="padding: 4px 10px 4px 10px;"><i class="fa fa-list" aria-hidden="true"></i></button>
</div>
</nav>
<br>
</br>
<div id="rightNav">
<br>
<ul>
<li>Home</li>
<li>Link</li>
<li>Disabled</li>
<li id="notesTab">Notes</li>
</ul>
</div>
<div class="modal" id="modal" style=" display: none;">
<div id="notes">
<i id="close" class="fa fa-times-circle fa-lg" aria-hidden="true"></i>
<h4>Notes</h4>
</div>
</div>
<br>
<div id="custInfoDiv">
<h3>Someone</h3>
<h4>Info</h4>
<table style="background-color: #fff;">
<tr>
<th>Phone:</th>
<td>903-123-4567</td>
</tr>
<tr>
<th>Cell:</th>
<td>903-222-3333</td>
</tr>
<tr>
<th>Email:</th>
<td>someone@gmail.com</td>
</tr>
<tr>
<th>Location:</th>
<td> somewhere</td>
</tr>
</table>
<h4>IP's</h4>
<table style="background-color: #fff;">
<tr>
<th>Public Ip:</th>
<td>10.10.10.122</td>
</tr>
<tr>
<th>Server Ip:</th>
<td>10.10.10.120</td>
</tr>
<tr>
<th>impi</th>
</tr>
</table>
<h4>Firewall</h4>
<table style="background-color: #fff;">
<tr>
<th>Model:</th>
<td>something</td>
</tr>
<tr>
<th>username:</th>
<td>blah blah</td>
</tr>
<tr>
<th>password:</th>
<td>blah blah</td>
</tr>
</table>
<h4>Prosperity V</h4>
<table style="background-color: #fff;">
<tr>
<th>Prosperity Version</th>
</tr>
<tr>
<td>3.0</td>
</tr>
</table>
<br>
<script src="js/bootstrap.min.js" charset="utf-8"> </script>
</body>
</html>