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 个答案: