ドロップダウンボックスのメニュー項目をクリックした後にドロップダウンボックスを非表示にする

-2

JavaScriptを初めて使用しています。私はドローダウンメニューを作成しました。クリックすると、ドロップダウンメニューが開き、もう一度クリックすると隠れる。ドロップダウンメニューからメニュー項目をクリックするたびに、そのJavaScriptコードを非表示にする必要があるJavaScriptコードが必要です。ドロップダウンボックスのメニュー項目をクリックした後にドロップダウンボックスを非表示にする

コード：どのようなコードは、私は、メニュー項目をクリックした後にドロップダウンメニューを非表示にすることができますJavaScriptで与えることができますいつでも

/* ----- JavaScript ----- */ 
 
var menuButton = document.getElementById("menu-btn"); 
 
var dropBox = document.getElementById('drop-box'); 
 
var menuItem = document.getElementsByClassName('sub-menu-item'); 
 
dropBox.style.display = 'none'; 
 
menuButton.onclick = function() { 
 
    if (dropBox.style.display == 'none') { 
 
    dropBox.style.display = 'block'; 
 
    } else { 
 
    dropBox.style.display = 'none'; 
 
    } 
 
};

/* ----- CSS ----- */ 
 
#menu-btn { 
 
    margin: 20px auto; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: green; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    cursor: pointer; 
 
} 
 

 
#drop-box { 
 
    width: 191px; 
 
    position: absolute; 
 
    left: 697px; 
 
    top: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#drop-box li { 
 
    list-style: none; 
 
} 
 

 
.linkBtn { 
 
    width: 100%; 
 
    background-color: orange; 
 
    display: block; 
 
    margin: 3px; 
 
    padding: 5px; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
.linkBtn:hover { 
 
    background-color: green; 
 
}

<!----- HTML -----> 
 
<div id="menu-btn" onClick="function();"> 
 
    click to open 
 
</div> 
 
<ul id="drop-box"> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li> 
 
</ul>

私の質問はありますか？

出典

2017-03-01 user3526127

javascript 
========== 
var menuButton = document.getElementById('menu-btn'); 
var dropBox = document.getElementById('drop-box'); 
var menuItem = document.getElementsByClassName('sub-menu-item'); 
dropBox.style.display = "none"; 
menuButton.onclick = function() { 
    if (dropBox.style.display == 'none' || dropBox.style.display == ''){ 
    dropBox.style.display = 'block'; 
    } else { 
    dropBox.style.display = 'none'; 
    } 
}; 



css 
===== 
#menu-btn { 
    margin: 20px auto; 
    width: 200px; 
    height: 50px; 
    background-color: green; 
    text-align: center; 
    padding-top: 30px; 
    cursor: pointer; 
} 

#drop-box { 
    width: 191px; 
    position: absolute; 
left: 140px; 
    top: 70px; 
    margin: 0; 
    padding: 0; 
} 

#drop-box li { 
    list-style: none; 
} 

.linkBtn { 
    width: 100%; 
    background-color: orange; 
    display: block; 
    margin: 3px; 
    padding: 5px; 
    color: black; 
    text-align: center; 
} 

.linkBtn:hover { 
    background-color: green; 
}

出典

2017-03-01 12:59:47

<html> 
<head> 

<style> 
#menu-btn{ 
    margin: 20px auto; 
    width:200px; 
    height:50px; 
    background-color:green; 
    text-align:center; 
    padding-top:30px; 
    cursor:pointer; 
    } 

#drop-box{ 
    width:191px; 
    position:absolute; 
    left: 697px; 
    top: 100px; 
    margin:0; 
    padding:0; 
} 

#drop-box li{ 
    list-style:none; 
    } 

.linkBtn{ 
    width:100%; 
    background-color:orange; 
    display:block; 
    margin:3px; 
    padding:5px; 
    color:black; 
    text-align:center; 
    } 

.linkBtn:hover{ 
    background-color:green; 
    } 

</style> 
<script> 
function myFunction() { 
    var menuButton = document.getElementById("menu-btn"); 
    var dropBox = document.getElementById('drop-box'); 
    var menuItem = document.getElementsByClassName('sub-menu-item'); 
    dropBox.style.display = 'none'; 
    menuButton.onclick = function() { 
if(dropBox.style.display == 'none'){ 
    dropBox.style.display = 'block'; 
     } else { 
    dropBox.style.display = 'none'; 
       } 
     }; 
} 
     </script> 
</head> 

<body> 


<div id="menu-btn" onClick="myFunction();"> 
click to open 
</div> 
<ul id="drop-box"> 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li> 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li> 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li> 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li> 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li> 
</ul> 

</body> 
</html>

だけでなくクリックし、このコード

出典

2017-03-01 12:46:40

バインド項目を確認してください以下の探してください。これは、あなたにはJavaScriptでそれを行うことができる方法である

/* ----- JavaScript ----- */ 
 
var menuButton = document.getElementById("menu-btn"); 
 
var dropBox = document.getElementById('drop-box'); 
 
var menuItem = document.getElementsByClassName('sub-menu-item'); 
 
dropBox.style.display = 'none'; 
 
menuButton.onclick = function() { 
 
    if (dropBox.style.display == 'none') { 
 
    dropBox.style.display = 'block'; 
 
    } else { 
 
    dropBox.style.display = 'none'; 
 
    } 
 
}; 
 
//bind item click 
 
dropBox.onclick = function() { 
 
    
 
    dropBox.style.display = 'none'; 
 
}; 
 

 
//Second way on li click 
 
for (var i=0; i<menuItem.length; i++) 
 
{ 
 
    menuItem[i].addEventListener('click', function() {dropBox.style.display = 'none';},false); 
 
}

/* ----- CSS ----- */ 
 
#menu-btn { 
 
    margin: 20px auto; 
 
    width: 200px; 
 
    height: 50px; 
 
    background-color: green; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    cursor: pointer; 
 
} 
 

 
#drop-box { 
 
    width: 191px; 
 
    position: absolute; 
 
    left: 697px; 
 
    top: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#drop-box li { 
 
    list-style: none; 
 
} 
 

 
.linkBtn { 
 
    width: 100%; 
 
    background-color: orange; 
 
    display: block; 
 
    margin: 3px; 
 
    padding: 5px; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
.linkBtn:hover { 
 
    background-color: green; 
 
}

<!----- HTML -----> 
 
<div id="menu-btn" onClick="function();"> 
 
    click to open 
 
</div> 
 
<ul id="drop-box"> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 01</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 02</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 03</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 04</a></li> 
 
    <li class="sub-menu-item"><a href="#" class="linkBtn">item 05</a></li> 
 
</ul>

出典

2017-03-01 12:47:24 Curiousdev

詳細については、スニペット：

document.querySelectorAll(".sub-menu-item").forEach(function(item, index){ 
    document.querySelectorAll(".sub-menu-item")[index].addEventListener("click", function(){ 
     document.querySelector("#drop-box").style.display = 'none'; 
    }) 
});

Here is the JSFiddle demo

出典

2017-03-01 12:53:19

ドロップダウンボックスのメニュー項目をクリックした後にドロップダウンボックスを非表示にする

答えて

関連する問題