ändern div class onclick auf ein weiteres div-Element, und ändern Sie zurück auf den Körper auf

Lassen Sie mich definieren Sie das problem ein bisschen mehr:

habe ich

    <div class="contact">
      <div id="form"></div>
      <div id="icon"></div>
    </div>

möchte ich onclick auf #icon zum ändern der Klasse .contact zu .contactexpand( oder Anhängen).

Dann möchte ich, dass die auf den Körper klicken Sie auf ändern, um die Klasse zurück, aber natürlich, das sollte nicht passieren, wenn Sie auf die neue Klasse .contactexpand, und wenn möglich, das klicken auf das Symbol erneut, ändert sich die Klasse wieder zurück.

Ich habe versucht, zahlreiche Beispiele und Kombinationen, aber ich konnte einfach nicht das richtige Ergebnis und Verhalten.

Fügen Sie einige html-mit Beschreibung
verloren in der Formatierung; nicht mehr
zeigen Sie uns Ihre versucht @JanBo
verwenden .toggleClass()
Statt tatsächlich ersetzen Sie die Klasse, warum nicht fügen Sie einfach eine zweite Klasse "erweitert" auf, klicken Sie auf? Dies kann leicht erreicht werden mit .toggleClass wie erwähnt von Mahmoud über mir

InformationsquelleAutor JanBo | 2013-03-12

3

Prüfen: Beispiel

Wir gehen Sie Schritt für Schritt

Möchte ich onclick auf # - Symbol, ändern Sie die Klasse .Kontakt zu .contactexpand( oder Anhängen). [...] und, wenn möglich, das klicken auf das Symbol erneut, ändert sich die Klasse wieder zurück.

Wollen Sie das toggleClass() Methode, dies zu erreichen. Ganz einfach:
```
$('#icon').on('click', function(e){

    $(this).parent()
    .toggleClass('contact')
    .toggleClass('contactexpand');

});
```
Dann möchte ich, dass die auf den Körper klicken Sie auf ändern, um die Klasse zurück

Stellen Sie sicher, dass body entfernt contactexpand Klasse und fügt Kontakt. An dieser Stelle würde ich nur geben, das container-element ein id (oder class wenn Sie bevorzugen), nur um Dinge einfacher machen. Dann, was Sie tun, ist ziemlich einfach:
```
$('body').on('click', function(e){

 $('#thisdiv')
 .removeClass('contactexpand')
 .addClass('contact');

});
```
aber natürlich, das sollte nicht passieren, wenn Sie auf die neue Klasse .contactexpand.

Dies ist der Schritt, den die anderen Antworten übersehen, denke ich. Da überall auf den Sie klicken, Sie auch klicken Sie auf die body element, werden Sie immer auslösen des click-Ereignisses auf der body, damit das entfernen der contactexpand Klasse und dem hinzufügen der contact ein.

Geben Sie - Ereignis.stopPropagation(). Diese Methode stellt sicher, dass die Ereignisse nicht Blase bis der DOM, und nicht den Auslöser body klicken.
```
$('#thisdiv').on('click', function(e){

    e.stopPropagation();

});
```
Beispiel
- Seine Arbeit perfekt!!! Ich danke Ihnen sehr! Genau der Letzte Teil ist, was die anderen Antworten übersehen, und so habe ich...nochmals vielen Dank.
InformationsquelleAutor Sunyatasattva

Können Sie eine Klasse hinzufügen, um das parent-element, wie im folgenden Codebeispiel.

$(".contact #icon").click(function(){
  var element = $(this).parent(".contact");
  element.removeClass("contact").addClass("contactexpand");
});

InformationsquelleAutor Imran Rashid

0

Ich mag die jQuerys toggleClass Funktion etwa so:
```
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
```
Oder verwenden Sie addClass('className') und removerClass('className') wenn Sie möchten, apend und nicht Umschalten 🙂

Hier ist ein Beispiel: http://jsfiddle.net/aUUkL/

Sie können auch hinzufügen einer onclick-Ereignis des body der Seite, und verwenden Sie hasClass('className'), um zu sehen, ob oder ob nicht, schalten Sie die Klasse, wenn der Körper geklickt wird. Sie könnte so etwas wie das (Obwohl ich noch nicht getestet, bit!):
```
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
    $('#contactbox').addClass('contact');
    $('#contactbox').removeClass('contactexpand');
}
});
```
InformationsquelleAutor user1636130

Können Sie dies tun,

$('body').on('click', function(event) {

    if ($(event.target).attr('id') == 'icon') {
        $(event.target).parent().toggleClass('contactexpand');
    } else {
        $('.contact').removeClass('contactexpand');
    }

});

Schauen Sie sich dieses jsfiddle

InformationsquelleAutor riccardolardi

var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
    e.stopPropagation();
    $contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});

$(document).on('click', function(e) {
    if (e.srcElement === $contact[0]) return;
    $contact.find('#icon').trigger('click', true);
});

http://jsfiddle.net/kZkuH/2/

InformationsquelleAutor dfsq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Wir gehen Sie Schritt für Schritt