jQuery - Hide-und show-Elemente auf klicken Sie auf

Möchte ich eine Leiste unten, die in der Regel zeigt "Kontaktieren Sie uns", aber wenn die Leiste geklickt wird, wird dann die Anzeige der Kontaktdaten klicken Sie noch einmal, schalten Sie die Leiste, um einfach zu sagen: "Kontaktieren Sie Uns" wieder auf. Ich habe versucht, toggle (), aber dann verließ mich in Situationen, in denen die Kontakte-us + und die details wurden ausgeblendet.

Ich glaube, ich muss eine else-Anweisung, aber meine Kenntnisse in jQuery ist glanzlos.

http://jsfiddle.net/DzYTZ/2/ (Die aus irgendeinem Grund funktioniert es nicht auf)

Kann bitte jemand helfen?

Dank

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

Bitte posten Sie Ihre javascript-code. Auch .footer existiert nicht in HTML.
Hier ist eine version der jsfiddle funktioniert... ich behoben, der Selektor in der jQuery zu verwenden .footer2 geändert und die CSS-definition von .footer2 .mehr entfernen display:inline. jsfiddle.net/DzYTZ/3

InformationsquelleAutor Ollie | 2012-12-29

Hier ist der komplette code. Ein paar wichtigsten Dinge, die das verhindert. Ihr Knebel-Selektor benötigt ein Komma zwischen den beiden Klassen. Dies gilt für das Umschalten auf die beiden Elemente. Sie ebenfalls angegeben wird die Klasse .footer, die wirklich existierten. Endlich, der Stil für .footer2 .more hatte display angegeben zweimal. Deshalb war es zu zeigen, wenn die Seite geladen ist. Aktualisiert-Beispiel hier 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()
        });

    });

Das war 100% das, was ich war nach, danke so viel - Sie ganz Fix meine noob-Fehler 🙂 Perfekt erklärt, gut aufgebaut und leicht zu Lesen - Haben Sie einen schönen Tag/Abend, wo immer Sie sind.

InformationsquelleAutor nthpixel

Sie können diese

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

Entfernen Sie auch die display:inline von der footer2 .more{...} zu halten, ist es zunächst versteckt.

InformationsquelleAutor The Alpha

1

Haben Sie verwendet .footer .more wo ich denke, du meintest .footer2 .more. Sie müssen auch zu verstecken .more mit javascript, da du nicht die css-Eigenschaft display gesetzt, um sowohl none und inline. Schließlich habe ich noch eine Anweisung zum Umschalten der "Kontaktieren Sie Uns" - text, aber Sie können Sie entfernen, wenn Sie wollen.

Versuchen Sie dies:
```
$(function() {
    $('.footer2 .more').hide();

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

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

InformationsquelleAutor grc

Ich werde versuchen und beantworten Ihre Frage mit einem Beispiel, der schaltet einfach eine css Klasse für den container ein-und ausblenden der enthaltenen Elemente:

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');
});

Fiddle

InformationsquelleAutor TJ.

0

Wenn ich Sie richtig verstehe, das ist, was Sie wollen DEMO.

Ich nahm Ihre Geige und einige änderungen vorgenommen.
```
    $('.contactus').click(function() {
        if($(".more").css("display") == "none"){
            $(".more").css("display","inline");
        }else{            
            $(".more").css("display","none");
        }
    });
```
Wenn Sie auf den Kontakt, wird es zu verbergen die more Klasse und wenn Sie bereits ausgeblendet, dann wird es sichtbar machen.

Ich nur, wenn zusammen mit der Geige, aber ich denke, Sie wollten die more - Klasse werden standardmäßig ausgeblendet, so dass Sie können fügen Sie diese Zeile vor dem code oben.

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

InformationsquelleAutor Fee

Versuchen, diese seine Werke !

<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

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.