Question

我试图让我的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>&#160;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>

移动Div，窗口大小改变，其他div被阻止

0 个答案: