jQuery toggle open/close div ' s

Momentan habe ich ein Menü mit 3 links, die öffnet versteckte div ' s relevant, um sich selbst und nutzen das jquery-code (siehe unten), aber würde es gerne, dass wenn ein div ist bereits geöffnet, wenn eine zweite div wird eröffnet, dass seine schließt die ursprüngliche geöffnet div ...

dh wenn "foobox" ist öffnen und dann Benutzer klickt auf "foo2" öffnen "foobox2" "foobox" schließen

$('#foo').toggle(function(){
 $('#foobox').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox').animate({marginLeft: '0'}, 1000);
});

$('#foo2').toggle(function(){
 $('#foo2box').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

$('#foo3').toggle(function(){
 $('#foobox3').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

wie üblich danke im Voraus.

InformationsquelleAutor Dizzi | 2011-06-23

2

Wenn Sie das öffnen, fügen Sie eine neue Klasse zu, die angibt, dass es aktiv ist. Und jedes mal, wenn Sie öffnen, schließen Sie den aktiven.
```
$('#foo').toggle(function(){
    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox').animate({marginLeft: '354'}, 1000).addClass('active');
    },
 function(){
    $('#foobox').animate({marginLeft: '0'}, 1000).removeClass('active');
});
```
Außerdem würde ich empfehlen ändern Sie Ihre HTML-und jQuery-so brauchen Sie nur einen event-handler.
Zum Beispiel anstatt diesen:
```
<div id="foo">Link</div>
<div id="foobox">Content</div>

<div id="foo2">Link</div>
<div id="foobox2">Content</div>
```
Könnten Sie tun:
```
<div class="foo" data-target="1">Link</div>
<div id="foobox-1">Content</div>

<div class="foo" data-target="2">Link</div>
<div id="foobox-2">Content</div>
```
Mit den folgenden jQuery:
```
$('.foo').toggle(function(){

    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox-'+$(this).data('target')).animate({marginLeft: '354'}, 1000).addClass('active');

},function(){

    $('#foobox-'+$(this).data('target')).animate({marginLeft: '0'}, 1000).removeClass('active');

});
```
- Dies ist, was im nach ich danke Ihnen, aber ich kann es gut funktionieren, auf jfiddle aber nicht in meinem Skript ....gonna haben zu spielen, um wenig denke ich, danke nochmal.
- Ich glaube nicht, dass es das ist, aber ist es möglich, dass Sie eine veraltete version von jQuery, die nicht akzeptieren .data()? Sind Sie immer Fehler? Mit dem Einsatz von console.log('test') und eine Konsole in etwa Firebug, Sie sollten in der Lage sein, um herauszufinden, wo in deinem script es falsch läuft.
- Ich wurde mit einer älteren jquery-version(1.4.2), nochmals vielen Dank funktioniert jetzt perfekt 🙂
InformationsquelleAutor Kokos
1

Hinzufügen, auf alle foo-Elemente (#foo, #foo2, #foo3..) der Klasse foo
Auch fügen Sie die foobox-Elemente (#foobox, #foobox2, #foobox3..) der Klasse foobox
und dieses verwenden:
```
$('.foo').live('click', function () {
if (!$(this).next().is(':visible')) {
$('.foobox').hide();
$(this).next().slideToggle();
if ($(this).next().is(':visible')) {
    //DoSomething
}
}
//DoSomething }
});
```
- Dies ist eine bessere Lösung als meine, aber beachten Sie, dass es nur funktioniert, wenn jeder foobox hinter Ihren verwandten foo. Wenn alle foo's sind in einem separaten div von allen foobox's funktioniert es nicht.
InformationsquelleAutor kleinohad

Klassen, wie zum Beispiel class="special" und dann mithilfe von jQuery setzen, schließen oder reverse-animation-Aktion auf, die Klasse, die vor der Eröffnung der aktuellen Klasse, so dass alle Menüs mit der Klasse geschlossen und geöffnet werden.

Nehme an, dein html ist

<div id="foo" class="menu">
    <div id="foobox" class="special"></div>
</div>
<div id="foo2" class="menu">
    <div id="foo2box" class="special"></div>
</div>
<div id="foo3" class="menu">
    <div id="foobox3" class="special"></div>
</div>

Und jQuery wie folgt

$('.special').live('click',function(){
    $('#foo').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

    $('#foo2').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foo2box').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foo2box').animate({marginLeft: '0'}, 1000);
    });

    $('#foo3').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox3').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox3').animate({marginLeft: '0'}, 1000);
    });
});

Beispiel auf JSFIDDLE.net

InformationsquelleAutor LoneWOLFs

0
```
$('#foobox').animate({marginLeft: '354'}, 1000).data( 'open', true );
```
Geben ein Daten jedes mal, wenn Sie öffnen ein div, dann jedes mal, wenn Sie öffnen ein div-prüfen Sie auch, ob alle anderen divs haben .data('open') == true, wenn Sie so bedeutet es, dass Sie offen sind, so schließen Sie Sie und entfernen Sie den data-Wert.

BEARBEITEN

Könnten Sie auch speichern Sie die geöffneten element auf eine variable, wie:
```
$('#foobox').animate({marginLeft: '354'}, 1000);
$opened_element = $('#foobox');
```
Dann, wenn Sie öffnen Sie eine andere box, schließen Sie einfach $opened_element. Wahrscheinlich muss es eine Globale variable, obwohl, so dass Ihr code.

InformationsquelleAutor Jose Faeti
0

Glaube ich, dass die Funktionalität, die Sie sprechen, ist überzogen http://docs.jquery.com/UI/Accordion

InformationsquelleAutor odeits

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.