jQuery-wenn nicht klicken Sie

Ich bin der Erstellung einer select-box aus div-und span-tags so, dass ich einen styled box für iphones und ipads. Es funktioniert Super, aber sobald der Benutzer klickt auf das Kontrollkästchen und drop-down-Auswahl dargestellt werden, der einzige Weg, um zu entfernen Sie die Auswahl-Liste, wählen Sie entweder eine Auswahl, oder klicken Sie auf die selectbox selbst wieder. Ich bin auf der Suche nach einer Funktion, die dem schließen der Auswahl-Liste der Benutzer klickt auf etwas anderes auf der Seite, in der Liste (wenn die Liste geöffnet ist). Das ist meine Funktion, behandelt die Anzeige der option Liste

jQuery:

    $(this).children('.selectedOption,.selectDropDownArrow').click(function(){
        if($(this).parent().children('.selectOptions').css('display') == 'none'){
            $(this).parent().children('.selectOptions').css('display','block');
        } else {
            $(this).parent().children('.selectOptions').css('display','none');
        }
    });

Nun brauche ich so etwas um, verarbeitet die Klicks auf andere Teile der website:

$('!.selectedOption,!.selectDropDownArrow').click(function() {
  if (!$('.selectOptions').css('display','none')) {
    $('.selectOptions').css('display','none');
  }
});

Kennt jemand einen Weg dies zu erreichen?

InformationsquelleAutor Jack Sniper | 2014-01-14

1

Da Sie das Umschalten der Sichtbarkeit versuchen, ändern Sie Ihre css-code zu verwenden, direkt toggle.

Beschreibung: Anzeigen oder ausblenden der Elemente abgestimmt.

Code:
```
$(this).children('.selectedOption,.selectDropDownArrow').click(function(){
   $(this).parent().children('.selectOptions').toggle();
});
```
Dann verwenden :not um alles auszuwählen, aber nicht Ihren Klassen und hide.

Beschreibung: Wählt alle Elemente, die nicht mit den vorgegebenen
selector.

Code:
```
$(":not(.selectedOption,.selectDropDownArrow)").click(function(){
  $('.selectOptions').hide();
});
```
UPDATE

Wenn Sie auf klicken und element der Veranstaltung ist sprudelte seine Vorfahren, in den Fall wird das element ausgeblendet werden, indem Sie die Allgemeinen ausblenden hf.

Um dies zu vermeiden, verwenden Sie stopPropagation.

Ref:

Beschreibung: Verhindert, dass die Veranstaltung vom sprudelnden bis der DOM-Baum,
Verhinderung einer übergeordneten Handler benachrichtigt werden, der Fall.

Code:
```
$(":not(.selectedOption, .selectDropDownArrow)").click(function (e) {
    alert('general');
    e.stopPropagation();
});

$(".selectedOption,.selectDropDownArrow").click(function (e) {
    alert('specific');
    e.stopPropagation();
});
```
Demo: http://jsfiddle.net/IrvinDominin/eb9wj/

Immer wenn ich den obigen code (mit der nicht-Auswahl), ich bin nicht mehr in der Lage, klicken Sie auf .selectedOption oder .selectDropDownArrow und die Liste anzeigen. Ihre Funktion macht Sinn, aber ich weiß einfach nicht, warum es nicht funktioniert für mich =/
Prabably es ein event-propagation-Problem, überprüfen Sie die update

InformationsquelleAutor Irvin Dominin

Verwenden :not()

$(":not(.selectedOption,.selectDropDownArrow)").click(function(){
  //do whatever
});

InformationsquelleAutor kei

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

UPDATE