Toggle Show / Hide Divs

Ich bin mit dem folgenden jQuery-und HTML-Dateien zum anzeigen und ausblenden von divs, wenn die links angeklickt werden.

Funktioniert dies auch wenn ich auf Brasilien das div-Element korrekt angezeigt. Aber wenn ich dann auf Amerika, das wird auch angezeigt aber Brasilien ist nicht versteckt.

Wie kann ich die Anzeige wechseln, also nur ein div ist, zeigen zu jeder Zeit.. ?

$(document).ready(function() {
$('.toggle').prev().data('is_visible', true);
$('.toggle').hide();
$('a.togglelink').click(function() {
$(this).data('is_visible', !$(this).data('is_visible'));
$(this).parent().next('.toggle').toggle('slow');
return false;
    });
});

<ul id="list">
<li><a href="#" class="togglelink">America</a></li>
<div class="toggle" style="display: block;"><p>America - USA - the States</p></div>

<li><a href="#" class="togglelink">Brazil</a></li>
<div class="toggle" style="display: block;"><p>Brazil - Federative Republic of Brazil</p></div>
</ul>
</div>

InformationsquelleAutor JeffVader | 2013-09-11

  1. 8

    Start durch die Festsetzung der markup-Code ein DIV kann nicht sein, ein direktes Kind eines UL.

    <ul id="list">
    <li>
        <a href="#" class="togglelink">America</a>
        <div class="toggle" style="display: block;">
            <p>America - USA - the States</p>
        </div>
    </li>
    <li>
        <a href="#" class="togglelink">Brazil</a>
        <div class="toggle" style="display: block;">
            <p>Brazil - Federative Republic of Brazil</p>
        </div>
    </li>
</ul>

    Dann tun:

    $(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('slow');
        elem.toggle('slow');
    });
});

    GEIGE

    Dank dieser gut funktioniert 🙂
    Ich habe diese arbeiten, aber wenn das div-Element gleitet über das Ende der Seite gibt es trotzdem, um die scroll-Seite automatisch so, dass das div immer noch sichtbar ist ? Und dann, wenn es geschlossen wird es haben, Blättern Sie zurück ? cheers

    InformationsquelleAutor adeneo

  2. 1

    Ich denke, du tust die Dinge zu kompliziert mit Ihren Daten verbindlich.
    Können Sie bitte überprüfen mein Beispiel DEMO

    Diese die Arbeit machen:

    $(document).ready(function() {   
$('.toggle').hide();
$('a.togglelink').click(function() {
    $('.toggle').hide();
    $(this).parent().next('.toggle').toggle('slow');
    return false;
});

    });

    Danke, das funktioniert. aber wie Verstecke ich ein div sichtbar und haben keine sichtbaren ?
    viel eleganter ist die Lösung. danke.
    du bist herzlich willkommen @Lächerlich

    InformationsquelleAutor franchez

Schreibe einen Kommentar