Javascript: le Masquage et l'affichage balise div avec un bouton à bascule

Je vais aller droit au but:

Ce que je dois faire est de cacher un particulier div avec la presse sur un bouton, et que c'est censé être une bascule, donc en gros: Appuyez une fois pour masquer, appuyez de nouveau sur pour afficher, appuyez de nouveau pour se cacher, etc...

Je veux l'afficher/masquer les règles à faire dans le CSS et l'interaction en javascript (pas de jquery s'il vous plaît). Eh bien c'est ce que je dois faire, mais je ne suis pas tout à fait sûr de la façon d'exécuter du code javascript.

html:

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above</div>

css:

#showhide {
     display: none;
}

.button {
    display: block;
    height: 30px;
    width: 100px;
    background: green;
    text-align: center;
    padding-top: 10px;
    padding-left: 0px;
    font: 15px arial bold;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}

http://jsfiddle.net/fyUJc/14/

Aussi, si vous pensez que cette question n'a pas sa place ici ou est stupide, s'il vous plaît essayer de s'abstenir d'être impoli, je suis juste en train d'apprendre ici.

Vous pouvez ajouter et supprimer une classe à la div pour afficher/masquer. Excellent roundup ici: stackoverflow.com/questions/195951/...
avec jquery, vous pouvez utiliser cette fonction simple .toggle() api.jquery.com/toggle

OriginalL'auteur Andrew P | 2014-01-08

Vous pouvez utiliser un onclick méthode. Votre HTML:

<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>

Et avoir le code JavaScript suivant:

function toggle_visibility(id) 
{
    var e = document.getElementById(id);
    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else 
    {
        e.style.display = 'block';
    }
}

DÉMO

OriginalL'auteur tomsullivan1989

2

Ici est une mise à jour de JSFiddle de votre code qui fonctionne avec le navigateur natif de méthodes et de mettre en œuvre une simple bascule composant - http://jsfiddle.net/fyUJc/31/
```
var button = document.querySelector('.button');
button.addEventListener('click', function(event) {
    var target = document.querySelector(button.getAttribute('data-target'));
    if (target.style.display == "none") {
        target.style.display = "block";
        button.innerHTML = button.getAttribute('data-shown-text');
    } else {
        target.style.display = "none";
        button.innerHTML = button.getAttribute('data-hidden-text');
    }
});
```
Par la création d'un bouton à bascule vous sont entrant dans le champ de GUI et c'est quelque chose de très complexe.

Navigateur actuel des technologies n'est pas un riche ensemble d'outils pour vous aider avec tout ce dont vous avez besoin pour gérer dans les Interfaces graphiques. jQuery est d'aucune aide, car les Interfaces sont plus sur la manipulation des composants et de l'état de manipulation du DOM.

Même que le code ci-dessus fonctionne dans Chrome, vous avez encore besoin de prendre soin de navigateur des différences dans les DOM et à l'événement et vous aurez besoin d'une meilleure abstraction pour les composants. Il y a beaucoup de problèmes qui ne sont pas abordés dans mon code et qui seront très difficiles à traiter correctement si vous écrivez à partir de zéro à chaque fois. Des choses comme:
- Comment vous initialisez nouvellement ajouté togglers sur la page ?
- Comment vous synchronisez l'état de la div et le bouton ?
- Comment vous étendre et de le brancher dans le comportement de la touche ?
Je vous conseille fortement que vous regardez dans l'INTERFACE utilisateur liées à des bibliothèques ou à des cadres qui offrent des solutions pour les problèmes les plus courants. Voir ReactJS, Dojo ou Sencha (ex. ExtJS) pour n'en nommer que quelques-unes. Regardez pour les cadres qui définissent un Widget/Composant le cycle de vie et les moyens d'étendre et de définir des formats personnalisés.

Navigateur technologies ne fournissent tout simplement pas le bon abstractions pour la fabrication de composants d'INTERFACE utilisateur.

OriginalL'auteur edzhelyov

Une solution alternative utilisant simplement "onclick" attribut à l'intérieur de votre tag HTML:

<!DOCTYPE html>
    <html>
        <head>
           <script>
               function toggle(){
                   var div = document.getElementById("divSection");
                   if (div.style.display =='block'){
                       div.style.display = 'none';
                       return;
                   }
                   div.style.display ='block';
             }
           </script>
        </head>

        <body>
            <p>Click the button to trigger a function.</p>
            <p class="button" onclick="toggle()">Show/hide</p>
            <div id='divSection'> I want to hide this by pressing the button above</div>
        </body>
    </html>

J'espère que cela aide.

OriginalL'auteur Alberto Montellano

Vous pouvez ajouter attacher un écouteur d'événement à la P balise et l'appel d'un Toggle() fonction de swap de la valeur d'affichage comme indiqué ci-dessous.

Exemple ici - JSFiddle

function Toggle() {
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

(function () {

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) {
        if (button[i].addEventListener) {
            button[i].addEventListener("click", function () {
                Toggle();
            });
        } else {
            button[i].attachEvent("click", function () {
                Toggle();
            });
        }
    }
})();

Bien que vous feriez mieux de l'ajout de IDs vos éléments afin d'en faciliter la référence.

OriginalL'auteur Jonathan

Vous devez vous connecter pour publier un commentaire.