0
私は、画面のサイズが500pxより小さいときに表示するドロップダウンメニューを取得しようとしています。後で、ナビゲーションバーを削除して、このメニューを小さなデバイスに置き換えます。window.innerWidth発砲しない場合
コードはよく見えますが、警告は発しますが、メニューは表示されません。
TLDR：https://jsfiddle.net/mcgettrm/y4edsu73/
コード：画面サイズ未満500pxなど
JSFiddleときに、メニューのショーを行う必要があり
var dropDownFunction = function(){
\t var menuContent = document.getElementById("dropDownMenuClass");
\t menuContent.classList.toggle("menuShow");
}
var windowWidth = window.innerWidth;
\t if(windowWidth < 500){
\t \t alert("window is too small");
\t \t
\t \t var dropDownMenu = getElementById("dropDownMenu");
\t \t dropDownMenu.classList.toggle("mainMenuShow");
\t \t
\t \t
\t \t
\t }#dropDownMenu {
\t
}
.dropDownMenuClass{
\t display:none;
}
.mainMenuShow{
\t display: block;
}
#dropDownMenuContent {
\t
}
.dropDownMenuContentClass {
\t display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t width:100%;
\t text-align: center;
}
#dropDownMenuContent a {
\t color: black;
\t padding: 12px 16px;
text-decoration: none;
display: block;
\t
}
#dropDownMenuContent a:hover {
\t background-color: #f1f1f1;
}
#dropDownButton {
\t width:100%;
\t background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.menuShow {
\t display: block;
}<div id="dropDownMenu" class="dropDownMenuClass">
\t \t \t \t \t <button onclick="dropDownFunction()" id="dropDownButton">MENU</button>
\t \t \t \t \t <div id="dropDownMenuContent" class="dropDownMenuContentClass">
\t \t \t \t \t \t <a href="index.html">Home</a>
\t \t \t \t \t \t <a href="about.html">About</a>
\t \t \t \t \t \t <a href="itprojects.html">IT Projects</a>
\t \t \t \t \t \t <a href="languageprojects.html">Language Projects</a>
\t \t \t \t \t \t <a href="contact.html">Contact</a>
\t \t \t \t \t \t <a href="essays.html">Essays</a>
\t \t \t \t \t </div>
\t </div>
の方法です。たとえば、Chromeで、あなたはそれがあるべき
が表示されますこれは[media queries]（https://stackoverflow.com/questions/3605058）です1/media-query-not-taking-effect-on-browser-resize）。 – BSMP