[JS] Soort dropdown menu

[radem205]

Hey,

Ik heb al heel veel geprobeerd om mijn probleem te verhelpen, maar kom er niet uit.

Ik heb een inputveld. Nu moet wanneer geklikt wordt in dat inputveld (focus) een div verschijnen (dit gaat verder allemaal goed).
In die div staan checkboxes die men aan / uit kan vinken (meestal bij een checkbox ).

Nu moet de div blijven staan wanneer de focus van de inputveld verwijderd wordt en geklikt wordt op de checkboxes. Wanneer men dan buiten de div klikt dan moet de div (met de checkboxes) weer verdwijnen.

Wat ik nu heb:

code:

document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('search_options');
if(target!=obj){
FoldMenuS();
}
else
{

FoldMenuS();

}
} 




function FoldMenuS() {
    if(document.getElementById("c_options").style.display == "block") {
        FoldMenu();
}

    statee = document.getElementById("search_option").style.display;
    if(statee == "none") {
        document.getElementById("search_option").style.display = "block";
        goFadee = 0;
        goFadeInS();
    }
    else {
        goFadee = 95;
        goFadeOutS();
    }
}

function goFadeInS() {
    maine = document.getElementById("search_option");
    if(maine.filters) {
        maine.filters.alpha.opacity = goFadee; 
    }
    else
    {
    
    var goFadeMoze = goFadee / 100;
        maine.style.MozOpacity = goFadeMoze;
        maine.style.KhtmlOpacity = goFadeMoze;
        maine.style.opacity = goFadeMoze; 
    }
        goFadee = goFadee+5;
    goIne = setTimeout("goFadeInS()", 30);
        if(goFadee >= 95) {
            clearTimeout(goIne);
            goFadee = 0;
        }
}

function goFadeOutS() {
    mainoe = document.getElementById("search_option");
        goFadee = goFadee-5;
    if(mainoe.filters) {
        mainoe.filters.alpha.opacity = goFadee; 
    }
    else
    {
    
    var goFadeMoze = goFadee / 100;
        mainoe.style.MozOpacity = goFadeMoze;
        mainoe.style.KhtmlOpacity = goFadeMoze;
        mainoe.style.opacity = goFadeMoze; 
    }
    goIne = setTimeout("goFadeOutS()", 30);
        if(goFadee <= 0) {
            clearTimeout(goIne);
            goFadee = 0;
        mainoe.style.display = "none";
        }
}

code:

<input type="text" onfocus="FoldMenuS();">
<div id="search_options">ksadlkdasl</div>

Met behulp van bovenstaande code wordt de div zichtbaar wanneer de focus op het inputveld ligt, maar wanneer ik dan op de div die zichtbaar wordt (search_options) klik dan verdwijnt de div weer (dit moet dus pas gebeuren wanneer men buiten de div klikt).

Kan iemand mij in de goede richting helpen?

[disjfa]

Niet elke keer als je focused kijken of je hem moet weghalen of laten zien

Heb je enigsins een idee waarmee je bezig bent. Dit is het derde topic met een bak code en een vraag "help me, ik begrijp het niet"

Lees gewoon een boel over javascript. Lees een boekje programeren voor beginners. En kijk wat je allemaal aan het doen bent Dat help veel meer dan elke keer als je een idee hebt hier een berg code posten

[JoostMartijn]

Ik zou in de div een knop plaatsen die dat doet voor de duidelijkheid van de gebruiker.

Ik heb zoiets gemaakt en heb de off Focus bepaald aan de hand van Muis coördinaten. Misschien niet de mooiste oplossing maar het werkte wel.