按钮需要双击才能更改

Button needs double click to change?

本文关键字：双击 按钮      更新时间：2023-09-26

我正在尝试制作一个带有按钮的下拉"菜单"。按钮从 + 更改为 - 取决于是否显示。问题是，如果我按下一个按钮，没关系，但是当我按下另一个按钮时，它不会下拉或更改，只是在我单击两次时会更改。法典：

    <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>
相关文章：