Button требуется двойной щелчок для изменения?

Я пытаюсь создать раскрывающееся меню с кнопками. Кнопка изменяется с + на - в зависимости от того, отображается ли она или нет. Дело в том, что если я нажму один, все в порядке, но тогда, когда я нажму на другую кнопку, она не выпадает или не меняется, просто меняется, если я дважды нажму. Код:Button требуется двойной щелчок для изменения?

<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

Thats не проблема, я установил флаг противоположного сог, когда его отображение и щелчки опять же, нужно спрятаться. Но все равно спасибо! – 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

Теперь, когда я нажимаю кнопку, ничего не делает, тогда вторая делает, и она работает нормально. Решила другую проблему, получила новую ... Спасибо, товарищ! – xinp4chi

@ xinp4chi Добро пожаловать;) Можете ли вы предоставить плункер? –

Пометить это как решение, потому что я использовал модель ур, меняя его, меняя второе, если для выражения else, и это работает как шарм! Благодаря!! 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

Button требуется двойной щелчок для изменения?

ответ

Смежные вопросы