按钮需要双击才能更改?
问题描述:
我试图做一个下拉菜单与按钮。取决于显示与否,按钮从+变为 - 。事情是,如果我按一个,它的好,但是当我按另一个按钮它不下拉或更改,只是改变,如果我点击两次。代码:按钮需要双击才能更改?
<style type="text/css">
#persona{
width: 100px;
height: 50px;
display: none;
}
#productes{
width: 100px;
height: 50px;
display: none;
}
button{
display: block;
margin-bottom: 10px;
width: 50px;
border: none;
}
</style>
</head>
<body>
<button id="b_persona" onclick="show_hide('persona','b_persona')">+</button>
<div id="persona">
</div>
<button id="b_productes" onclick="show_hide('productes','b_productes')">+</button>
<div id="productes">
</div>
<script type="text/javascript">
var show_persona = true;
var show_producte = true;
function show_hide (id,b_id) {
if(!show_persona){
document.getElementById(id).style.display = "none";
document.getElementById(b_id).innerHTML = "+";
show_persona = true;
}else{
document.getElementById(id).style.display = "block";
document.getElementById(b_id).innerHTML = "-";
show_persona = false;
}
if(!show_producte){
document.getElementById(id).style.display = "none";
document.getElementById(b_id).innerHTML = "+";
show_producte = true;
}else{
document.getElementById(id).style.display = "block";
document.getElementById(b_id).innerHTML = "-";
show_producte = false;
}
}
</script>
</body>
问题基本上是当我点击一个按钮,然后另一个。有任何想法吗?多谢你们!
答
show_hide
的一次调用将改变两个标志的值。然而,只有一个<div>
的财产将被更改,它将被更改两次(在每个if
声明中)。试试这个:
function show_hide (id,b_id) {
if(id === 'persona'){
if(!show_persona){
document.getElementById(id).style.display = "none";
document.getElementById(b_id).innerHTML = "+";
show_persona = true;
}else{
document.getElementById(id).style.display = "block";
document.getElementById(b_id).innerHTML = "-";
show_persona = false;
}
}
if(id === 'productes'){
if(!show_producte){
document.getElementById(id).style.display = "none";
document.getElementById(b_id).innerHTML = "+";
show_producte = true;
}else{
document.getElementById(id).style.display = "block";
document.getElementById(b_id).innerHTML = "-";
show_producte = false;
}
}
}
答
可以是做这种方式也
<button id="b_persona" class="all-btn" onclick="show_hide('persona','b_persona')">+</button>
<div id="persona" class="common-class" style="background-color:yellow">
</div>
<button id="b_productes" class="all-btn" onclick="show_hide('productes','b_productes')">+</button>
<div id="productes" class="common-class" style="background-color:red">
</div>
JS:
<script type="text/javascript">
var show_persona = true;
var show_producte = true;
function show_hide (id,b_id) {
var arrAllEle = document.getElementsByClassName('common-class');
var arrAllBtn = document.getElementsByClassName('all-btn');
for(var i =0;i<arrAllEle.length;i++){
arrAllEle[i].style.display ="none";
}
for(var i =0;i<arrAllBtn.length;i++){
arrAllBtn[i].innerHTML ="+";
}
document.getElementById(id).style.display = "block";
document.getElementById(b_id).innerHTML = "-";
}
</script>
那不是问题,我该标志设置为相反的怎么把它展示和点击时再次,必须隐藏。不过谢谢! – xinp4chi