jQuery - Masquer et afficher des éléments sur cliquez sur

Je veux faire une barre en bas qui affiche généralement "Contactez-nous", mais quand la barre est cliqué, il va alors afficher les détails du contact, cliquez de nouveau tourner la barre juste en disant "Nous Contacter" de nouveau. J'ai essayé de bascule() mais qui ensuite m'a laissé dans les situations où les Contacts us + et les détails ont été cachés.

Je pense que j'ai besoin d'un autre énoncé, mais ma connaissance de jQuery est terne.

http://jsfiddle.net/DzYTZ/2/ (Qui, pour une raison quelconque, il ne fonctionne pas sur)

Quelqu'un peut s'il vous plaît aider?

Grâce

<div class="footer2"> 
    <a href="#" class="contactus">
        Contact Us
    </a>

    <div class="more">
        <a href="#">
            @twitterhandle
        </a>

        <a href="#">
            e-mail
        </a>
    </div>
</div>

    .footer2
{
background-color: black;
margin-top: 1em;
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
width: 100%;
}
    .footer2 .contactus
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #e3e3e3;
    text-decoration: none;
    display: inline;
}
    .footer2 .contactus:hover
{
    color: white;
}
    .footer2 .more
{
    margin-left: 1em;
    display: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    display: inline;
}
    .footer2 .more a
{
    margin-left: 2em;
    color: #e3e3e3;
    text-decoration: none;
}
    .footer2 .more a:hover
{
    color: white;
}

Merci de poster votre code javascript. Aussi, .footer n'existe pas dans le HTML.
Voici une version de la jsfiddle qui fonctionne... j'ai corrigé le sélecteur dans votre jQuery à utiliser .footer2 et changé le CSS définition de .footer2 .plus retrait display:inline. jsfiddle.net/DzYTZ/3

InformationsquelleAutor Ollie | 2012-12-29

Voici le code complet. Quelques choses principales empêché de travailler. Votre sélecteur à bascule besoin d'une virgule entre les deux classes. Cela s'applique à la bascule pour les deux éléments. Vous avez également indiqué une classe nommée .footer qui n'existe pas. Enfin, le style de .footer2 .more avait display spécifié deux fois. C'est pourquoi il a été montrant lorsque la page est chargée. Mise à jour de l'échantillon ici http://jsfiddle.net/DzYTZ/7/

    .footer2
    {
        background-color: black;
        margin-top: 1em;
        padding-top: 1em;
        padding-bottom: 1em;
        text-align: center;
        width: 100%;
    }

        .footer2 .contactus
        {
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            color: #e3e3e3;
            text-decoration: none;
            display: inline;
        }

            .footer2 .contactus:hover
            {
                color: white;
            }



        .footer2 .more
        {
            margin-left: 1em;
            display: none;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            color: #e3e3e3;
            text-decoration: none;
        }

            .footer2 .more a
            {
                margin-left: 2em;
                color: #e3e3e3;
                text-decoration: none;
            }

                .footer2 .more a:hover
                {
                    display: none;
                    font-family: 'Open Sans', sans-serif;
                    font-weight: 400;
                    color: white;
                    text-decoration: none;
                }

<div class="footer2">
    <a href="#" class="contactus">Contact Us
    </a>
    <div class="more">
        <a href="#">TWITTER HANDLE
        </a>

        <a href="#">EMAIL
        </a>
    </div>
</div>

    $(function () {

        $('.footer2').click(function () {

            $('.contactus, .more').toggle()
        });

    });

C'était à 100% ce que je recherchais, merci beaucoup - Vous complètement corrigé mes erreurs de noob 🙂 Parfaitement expliqué, bien aménagé et facile à lire - passez une bonne journée/nuit à l'endroit où vous êtes.

InformationsquelleAutor nthpixel

Vous pouvez utiliser cette

$('.footer2').click(function() {
    var display=$('.footer2 .more').css('display') == 'inline' ? 'none' : 'inline'; 
    $('.footer2 .more').css('display', display);
});

Aussi supprimer le display:inline de la footer2 .more{...} garder initialement masqué.

InformationsquelleAutor The Alpha

1

Vous avez utilisé .footer .more où je pense que vous vouliez dire .footer2 .more. Vous aurez également besoin de cacher .more avec javascript, puisque vous ne pouvez pas avoir la propriété css display de définir les deux none et inline. Enfin, j'ai ajouté une déclaration à basculer le "Nous Contacter" du texte, mais vous pouvez le supprimer si vous le souhaitez.

Essayez ceci:
```
$(function() {
    $('.footer2 .more').hide();

    $('.footer2').click(function() {
        $('.footer2 .more').toggle();
        $('.footer2 .contactus').toggle();
    });

});
```
Exemple: http://jsfiddle.net/grc4/mG5EY/

InformationsquelleAutor grc

Je vais essayer de répondre à votre question avec un exemple que le simple fait basculer une classe css sur le conteneur pour afficher et masquer les éléments contenus:

HTML:

<div class="container">
    <a class="toggle-details" href="#">Contact Us</a>
    <div class="details">Details</div>
</div>

CSS:

.details-visible .toggle-details {
    display: none;
}
.details {
  display: none;   
}
.details-visible .details {
    display: block;
}

Javascript:

$('.toggle-details, .details').on('click', function(e) {
    e.preventDefault();

    $('.container').toggleClass('details-visible');
});

Violon

InformationsquelleAutor TJ.

0

Si je vous comprends bien, c'est ce que vous voulez DÉMO.

J'ai pris votre violon et apporté quelques modifications.
```
    $('.contactus').click(function() {
        if($(".more").css("display") == "none"){
            $(".more").css("display","inline");
        }else{            
            $(".more").css("display","none");
        }
    });
```
Lorsque vous cliquez sur Contactez-Nous, il va se cacher la more la classe, et si sa déjà caché, alors il sera de la rendre visible.

Je viens de quand avec le violon, mais je pense que tu voulais le more classe caché par défaut, de sorte que vous pouvez ajouter cette ligne avant le code ci-dessus.

$(".more").css("display","none");

InformationsquelleAutor Fee

Essayer sa fonctionne !

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

InformationsquelleAutor Amaresh Tiwari

Vous devez vous connecter pour publier un commentaire.