fonctions javascript pour afficher et masquer les divs

Bonjour, j'ai les 2 fonctions JavaScript pour ouvrir un div et pour 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 fonctionne, comment il devrait, mais le bouton de fermeture n'a pas fait son travail. Donc si il y a quelqu'un qui pourrait m'aider j'en serait vraiment apprécier. Merci beaucoup.

Avez-vous envisagé d'utiliser jQuery pour ces opérations?
non, je n'ai jamais travaillé avec jQuery avant.
Il vous manque des guillemets autour de l'appel de la fonction <a onclick="close();">
Il devrait y avoir des guillemets autour de l'fonctions: onclick="close()" Aussi, il n'est pas contenu dans l'ancre associée à la onclick...
merci de répondre. réglage de guillemets ne résout pas le problème.

InformationsquelleAutor bonny | 2012-07-09

21
```
<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> 
```
- les travaux de cette. deux problèmes restent encore à gauche. la première est que l'ancre ne marche pas plus. en cliquant sur le href, il devrait mettre l'ancre en haut du site. et la seconde encore, je suis un peu compliqué. en appelant le hide() de la fonction, il doit être automatiquement le focus d'un champ de saisie.
- vous pouvez supprimer le "return false;" pour ajouter l'ancre, mais je pense que, le code ne fonctionne plus. la automatiquement le focus peut être réalisé avec : document.getElementById('inputfieldID').focus();
- bon, j'ai fait la suivante: j'ai enlevé le retour de ces deux fonctions, renommé hide() dans (clo) et définir le focus(). que toutes les grandes œuvres. besten dank und grüße aus berlin
- Merci! pour ce...
- return false; déclaration de travaux pour moi!! En tant que novice je ne sais pas la raison:(
InformationsquelleAutor WolvDev

J'ai l'habitude de le faire avec des classes, qui semble forcer les navigateurs à réévaluer tous les style.

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

ensuite utiliser;

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

Note le boîtier de la "className" que les voyages m'a beaucoup

InformationsquelleAutor PaulMolloy

La beauté de jQuery va nous permettre de faire le suivant:

$(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 prendre 1 bouton activer /désactiver l'affichage, comme ceci:

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

InformationsquelleAutor Richard

3

Vous avez besoin du lien à l'intérieur pour être cliquable, le sens qu'il a besoin d'un href, avec un peu de contenu, et aussi, close() est une fonction intégrée de fenêtre, de sorte que vous besoin de changer 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 devez utiliser <input type="button"/> ou <button/>.
- WTH avec les points négatifs?? C'est exact, les gars...
- +1 parce que vous êtes le seul à mentionner le bouton. Je n'arrêtais pas de regarder le code des autres et de penser que "ce bouton est-il en parler? Je ne vois pas du tout!" lol
InformationsquelleAutor Brett Zamir

vérifier:

cliquez ici

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

ne pas changer quoi que ce soit.

InformationsquelleAutor Mark Drabant

Renommer de la clôture de la fonction "masquer", par exemple et il va fonctionner.

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

InformationsquelleAutor ksladkov

0

Proche semble être un mot réservé quelconque (Éventuellement en se référant à la fenêtre.fermer). Le changer pour quelque chose d'autre semble résoudre le problème.

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

InformationsquelleAutor Brandon Boone

Vous pouvez compresser les deux avec quelque chose comme ça [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 d'utiliser la même fonction, dans les deux touches ou plus généralement dans la page pour les deux fonctions.

InformationsquelleAutor AMDP

Vous devez vous connecter pour publier un commentaire.