按钮需要双击才能更改？

我试图做一个下拉菜单与按钮。取决于显示与否，按钮从+变为 - 。事情是，如果我按一个，它的好，但是当我按另一个按钮它不下拉或更改，只是改变，如果我点击两次。代码：按钮需要双击才能更改？

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

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

来源

2016-01-21 xinp4chi

那不是问题，我该标志设置为相反的怎么把它展示和点击时再次，必须隐藏。不过谢谢！ – xinp4chi

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

}

来源

2016-01-21 10:11:30

现在，我第一次点击按钮不会做任何事情，然后第二次，它工作正常。解决了另一个问题，得到了一个新的..谢谢mate！ – xinp4chi

@ xinp4chi不客气;）你可以提供一个运动员吗？ –

我把它标记为已解决，因为我使用了你的模型，改变了它，改变了第二个如果对于其他语句，它的作用就像一个魅力！谢谢！！ PS：你的运动是什么意思？标记为已解决并将答案标记为有用？ – xinp4chi

可以是做这种方式也

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

来源

2016-01-21 10:35:53

按钮需要双击才能更改？

回答

相关问题