搜索了一下,没有找到我要找的东西。我有两个按钮,单击一次即可拉出两个不同的选择框,第二次单击它们就会消失。但是,我希望选择框 1 在单击按钮 2 时消失,反之亦然:选择框 2 将在单击按钮 1 时消失。
HTML:
window.onload = function()
{
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
function button2function(id){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'initial';
}else{
document.getElementById(id).style.display = 'none';
}
}
<button type="button" value='hide/show' onclick="button1function('name1')">Button 1</button>
<button type="button" value='hide/show' onclick="button2function('name2')">Button 2</button>
<select id="name1">
<option value="">What would you like to know..</option>
</select>
<select id="name2">
<option value="">What would you like to know 2..</option>
</select>
最佳答案
像这样吗? https://jsfiddle.net/o3btLkpd/
尝试在按钮 1 的事件处理程序顶部调用此函数:
document.getElementById('name2').style.display = 'none';
这在按钮 2 的处理程序中:
document.getElementById('name1').style.display = 'none';
完整的结果代码如下所示:
window.onload = function() {
document.getElementById('name1').style.display = 'none';
document.getElementById('name2').style.display = 'none';
};
function button1function(id) {
document.getElementById('name2').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
function button2function(id) {
document.getElementById('name1').style.display = 'none';
if (document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'initial';
} else {
document.getElementById(id).style.display = 'none';
}
}
关于javascript - 单击按钮时选择框出现/消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55170540/