| 

.NET C# Java Javascript Exception

3
Hallo,
ich beiße mir gerade einen Zahn daran aus. Die Lösung ist sicherlich eine ganz einfache, allerdings komme ich einfach nicht drauf.

Aus Listenelementen möchte ich gerne ein "optisches" Select Field basteln, mit CSS Stylen und der gleichen.

Zuerst einmal mein HTML Markup:
<div class="select_container">
<h3 class="reset">Select Items</h3>
<ul class="select_elements">
<li>Select Item 01</li>
<li>Select Item 02</li>
<li>Select Item 03</li>
</ul>
</div>

...das dazu passende CSS...
h3{
/* STYLE ANWEISUNGEN */
}
.select_container{
/* STYLE ANWEISUNGEN */
}
.select_container ul.select_elements{
display:none;
/* STYLE ANWEISUNGEN */
}


Das ganze auf - und einzuklappen ist gar kein Problem.
Es gibt allerdings das Problem, das sich dieses "Select" Field nicht einklappen lässt, wenn man z.B. auf eine andere Stelle der Webseite klickt.

Mein letzter Stand meiner Versuche in jQuery:
$(document).ready(function(){

var selectFields = {
init: function(){

$('.select_container').on('click',function(){
$(this).find('ul.select_elements').toggle();
$(this).find('ul.select_elements').toggleClass('active');
});

$(document).bind('click',function(){
if( $('.select_elements').is(':visible')){
$('.select_elements.active').hide();
}
else if( $('.select_elements').is(':hidden')){
console.log('visible false ...');
}

});

}
};

$(selectFields.init);
});


Ich hoffe das jemand hier einen Lösungsvorschlag hat :)
Danke!
News:
29.04.2014
owi 11 2
LiRo 1,3k 1 9
Versuchs doch mal mit dem lostFocus Event auf dem "Select" anstelle eines Klicks auf das "document" ;-)
DerPunk 29.04.2014
1 Antwort
0
Ich habe mich jetzt nochmal hingesetzt und das komplette Script überdacht. Warum so kompliziert, wenn es auch einfacher geht. Hier mein Vorschlag:

$(document).ready(function(){

var selectFields = {

init: function(){
$(document).bind('click',function(e){
if( $('ul').hasClass('active')){
$('ul').hide()
$(this).find('ul.select_elements').toggleClass('active');
}
});

$('.select_container').on('click',function(e){
e.stopPropagation()
if( !$('ul').hasClass('active')){
$('ul').show()
}else{ $('ul').hide() }
$(this).find('ul.select_elements').toggleClass('active');
});
}
};

$(selectFields.init);
});


Versuchs doch mal mit dem lostFocus Event auf dem "Select" anstelle eines Klicks auf das "document" ;-)
– DerPunk
Das habe ich jetzt nicht getestet, schaue ich mir aber zusätzlich auch nochmal an. Danke :)
29.04.2014
owi 11 2

Stelle deine Javascript-Frage jetzt!