web-dev-qa-db-fra.com

fonctions javascript pour afficher et masquer les divs

Bonjour, j’ai les 2 fonctions JavaScript suivantes pour ouvrir un div et le fermer. 

<script>
    function show() {
        if(document.getElementById('benefits').style.display=='none') {
          document.getElementById('benefits').style.display='block';
        }
    }
</script>



<script>
    function close() {
        if(document.getElementById('benefits').style.display=='block') {
          document.getElementById('benefits').style.display='none';
        }
    }  
</script>

Voici le code HTML:

<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
   some input in here plus the close button
   <div id="upbutton"><a onclick=close()></a></div>
</div>

Pour une raison quelconque, la fonction show fonctionne normalement, mais le bouton de fermeture ne fait pas son travail. Donc, s'il y a quelqu'un qui pourrait m'aider, j'apprécierais vraiment. Merci beaucoup.

javascriptfunctionhtml
6
bonny
<script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 


 <div id="opener"><a href="#1" name="1" onclick="return show();">click here</a></div> 
    <div id="benefits" style="display:none;">some input in here plus the close button 
           <div id="upbutton"><a onclick="return hide();">click here</a></div> 
    </div>
20
WolvDev

Je fais généralement cela avec des classes, ce qui semble obliger les navigateurs à réévaluer le style.

.hiddendiv {display:none;}
.visiblediv {display:block;}

puis utiliser;

<script>  
function show() {  
    document.getElementById('benefits').className='visiblediv';  
}  
function close() {  
    document.getElementById('benefits').className='hiddendiv';  
}    
</script>

Notez le boîtier de "className" qui me fait trébucher

5
PaulMolloy

La beauté de jQuery nous permettrait de faire ce qui suit:

$(function()
{
    var benefits = $('#benefits');

    // this is the show function
    $('a[name=1]').click(function()
    { 
        benefits.show();
    });

    // this is the hide function
    $('a', benefits).click(function()
    {
        benefits.hide();
    });
});

Vous pouvez également avoir 1 bouton pour basculer l’affichage, comme ceci:

$(function()
{
    // this is the show and hide function, all in 1!
    $('a[name=1]').click(function()
    { 
        $('#benefits').toggle();
    });
});
4
Richard

Le lien à l'intérieur doit être cliquable, ce qui signifie qu'il a besoin d'un href avec du contenu et que close () est une fonction intégrée de window. Vous devez donc modifier le nom de la fonction pour éviter un conflit.

<div id="upbutton"><a href="#" onclick="close2()">click to close</a></div>

Aussi, si vous voulez un vrai "bouton" au lieu d'un lien, vous devriez utiliser <input type="button"/> ou <button/>.

3
Brett Zamir

Renommez la fonction de fermeture en "masquer", par exemple, et cela fonctionnera.

function hide() {
    if(document.getElementById('benefits').style.display=='block') {
      document.getElementById('benefits').style.display='none';
    }
}
2
ksladkov

vérifie ça:

<div id="benefits" style="display:none;">some input in here plus the close button
       <div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>
2
Mark Drabant

Close semble être un mot réservé de quelque sorte (se référant éventuellement à window.close). Le changer pour quelque chose d'autre semble résoudre le problème. 

http://jsfiddle.net/c7gdL/1/

0
Brandon Boone

Vous pouvez compresser les deux avec quelque chose comme ceci [comme le fait jQuery]:

function toggleMyDiv() {
 if (document.getElementById("myDiv").style.display=="block"){
  document.getElementById("myDiv").style.display="none"
  }
 else{
  document.getElementById("myDiv").style.display="block";
 }
}

..et utilise la même fonction dans les deux boutons - ou généralement dans la page pour les deux fonctions.

0
AMdP