JS - Click buiten div > verberg div

[ghostman]

Zoals de title al een beetje zegt wil ik dat als er buiten een div een geklikt word dat de div dan niet meer te zien is. Hier is dus echt gigantisch veel over vinden op internet, maar ik krijg de antwoorden op internet niet goed aan het draaien.

Het gaat om een dropdown voor verschillende talen. Als je naar de website gaat is Engels altijd standaard, maar als je op Engels klikt komt er een dropdown die dan meerdere talen laat zien als optie. Als je daar dan op klikt ga je naar de betreffende taal die als link is (/de/, /fr/, /es/ etc).

Stackoverflow heeft een oplossing, maar geeft ook meteen een link waarom dit eigenlijk geen goede oplossing is. Dit stukje heb ik ook geprobeerd, maar geeft ook meteen problemen. Als ik klik op een taal dan werkt dit een paar keer, maar na x keer achter elkaar klikken (en na een andere pagina gaan) opent het submenu niet meer (via css kan ik wel zien dat er op geklikt is).

Om het op mobiel ook te laten werken heb ik .click(function() veranderd naar .on('click touchstart', function(), maar dit zorgt er niet voor dat ik hem op mobiel kan openen (via css kan ik wel zien dat er geklikt is door een background verandering).

Mijn code:

HTML:

<div class="topHeader">
    <div class="container">
        <ul>
            <li><a>English<span class="caret"></span></a>
                <ul class="topDropdown">
                    <li><a href="/de/">Deutsch</a></li>
                    <li><a href="/fr/">Français</a></li>
                    <li><a href="/es/">Español</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

JavaScript:

$('.topHeader ul li ul').hide();
$('html').on('click touchstart', function() {
    $('.topHeader ul li ul').hide();
});
$('.topHeader ul li ul li').on('click touchstart', function() {
    $('.topHeader ul li ul').hide();
});
$('.topHeader').on('click touchstart', function() {
    event.stopPropagation();
});
$('.topHeader ul li a').on('click touchstart', function() {
    $('.topHeader ul li ul').toggle();
});

JSFiddle voor wie dat fijner vindt

Maak trouwens geen gebruik van een framework of zoiets, alleen jquery 2.2.0

[ Voor 1% gewijzigd door ghostman op 09-02-2016 15:27 . Reden: Toevoeging ]

[Matszs]

Als je event gebruikt moet je deze ook definieren als een argument:

code:

$('.topHeader').on('click touchstart', function() {
    event.stopPropagation();
});

naar

code:

$('.topHeader').on('click touchstart', function(event) {
    event.stopPropagation();
});

Verder zou je touchstart niet direct nodig moeten hebben, click werkt ook op mobiele platformen.

[FotW]

Als je je function een event meegeeft kun je de event.target afvangen en die checken met het element dat je niet wil selecteren, je zou aan de hand daarvan de klik kunnen blokkeren

code:

... function(event) {
    if ( event.target == {je id} )
});

Ik meen dat er ook een not selector is om iets vergelijkbaars te doen, maar heb even niet paraat hoe dat ook alweer zat.

[ghostman]

Matszs schreef op dinsdag 09 februari 2016 @ 15:32:
Als je event gebruikt moet je deze ook definieren als een argument:

code:

$('.topHeader').on('click touchstart', function() {
    event.stopPropagation();
});

naar

code:

$('.topHeader').on('click touchstart', function(event) {
    event.stopPropagation();
});

Verder zou je touchstart niet direct nodig moeten hebben, click werkt ook op mobiele platformen.

Het duurde 2 dagen en nu heb ik dus het antwoord Dat ik dat niet gezien heb..

Hij werkt nu goed, bedankt beide