按钮需要双击才能更改？

Question

我正在尝试使用按钮创建下拉菜单。 该按钮从+变成--取决于是否显示。 问题是，如果我按一个就可以，但是当我按另一个按钮时，它不会下拉或更改，只要单击两次就可以更改。 码：

    <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>

问题基本上是当我单击一个按钮，然后单击另一个按钮时。 有任何想法吗？ 多谢你们！

Answer 1

一次调用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;
        }
    }

}

Answer 2

也可以这样做

<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>

按钮需要双击才能更改？

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-01-21 10:11:30

解决方案2
0 2016-01-21 10:35:53

按钮需要双击才能更改？

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-01-21 10:11:30

解决方案2 0 2016-01-21 10:35:53

解决方案1
1 已采纳 2016-01-21 10:11:30

解决方案2
0 2016-01-21 10:35:53