jquery if else mit css abfrage funktioniert nicht

[stenz]

Hallo,

ich habe folgendes Problem mit folgendem Code

                        <li><a id='profil'>profil</a></li>
                        <div class='head_profile' style="visibility:hidden">
                            <a href='' class='h_p'>Mein Profil</a>
                            <a href='' class='h_p'>Nachrichten</a>
                            <a href='' class='h_p'>Einstellungen</a>
                            <a href='' class='h_p'>Abmelden</a>
                        </div>

        <script>
            $(document).ready(function(){ 
                if($('.head_profile').css('visibility') == 'hidden'){
                    $('#profil').click(function(){
                        $('.head_profile').css({'visibility':'visible'});
                        $('#profil').addClass('active');
                    });
                }
                else{ 
                    $('html').click(function(){
                        $('.head_profile').css({'visibility':'hidden'});
                        $('#profil').removeClass('active');
                    });
                }
            });
        </script>

jetzt funktioniert bei mir die if abfrage nicht, wenn ich auf "<li><a id='profil'>profil</a></li>" klicke erscheint das Fenster, jedoch wenn ich außerhalb davon irgendwas klicke bleibt das Fenster weiterhin bestehen. Obwohl es weggehen sollte.
Hoffe mir kann geholfen werden :)

Gruß Stenz

 

[Körnerbrötchen]

Lesestoff: jQuery if / else statements - CSS-Plus :)

 

[stenz]

So hab das von Körnerbrötchen durchgelesen nun sieht mein Script so aus aber es funktioniert immer noch nicht :S

            $(document).ready(function(){ 
                var a = $('.head_profile').css('visibility');
                    b = 'hidden';
                    c = 'visible';
                    
                if(a == b){
                    $('#profil').click(function(){
                        $('.head_profile').css({'visibility':'visible'});
                        $('#profil').addClass('active');
                    });
                }
                
                if(a == c){ 
                    $('html').click(function(){
                        $('.head_profile').css({'visibility':'hidden'});
                        $('#profil').removeClass('active');
                    });
                }
            });

 

[Körnerbrötchen]

b und c werden auch nicht deklariert. Was sagt zudem die Fehlerkonsole?

 

[stenz]

So habs gelöst, habe ganz einen anderen Ansatz angenommen.
Sollte funktionieren wie zB in Facebook, wenn man rechts oben auf den Pfeil klickt. Das dann der Popup bestehen bleibt, solang man nicht außerhalb von diesem Bereich klickt oder wieder auf das Pfeil klickt, dann klappt das ja wieder zu.

            var first_mouse = false;
            var second_mouse = false;
    
            $(document).ready(function()
            {
                $('#preferences').hover(function(){ 
                    first_mouse = true; 
                },function(){ 
                    first_mouse = false; 
                });
                
                $('.preferences_details').hover(function(){ 
                    second_mouse = true; 
                },function(){ 
                    second_mouse = false; 
                });
            
                $(document).mouseup(function(){ 
                    if($('#preferences').is('.active')){
                        if(first_mouse){
                            $('.preferences_details').css({'visibility':'hidden'}); 
                            $('#preferences').removeClass('active');
                        }
                    }else{
                        if(first_mouse){
                            $('.preferences_details').css({'visibility':'visible'});
                            $('#preferences').addClass('active');
                        }
                    }
                });
            
                $(document).mouseup(function(){ 
                    if(!second_mouse){
                        if(!first_mouse){
                            $('.preferences_details').css({'visibility':'hidden'});
                            $('#preferences').removeClass('active');
                        }
                    }
                });
            });

Zum Code, durch Hover bekomm ich meine Information wo der Mauszeiger gerade ist.

#preferences PFEIL
.preferences_details POPUP

1. Ist der Mauszeiger auf dem Pfeil -> JA oder NEIN
2. Ist der Mauszeiger auf dem Popup -> JA oder NEIN

Mit diesen zwei Informationen kann man arbeiten. Zuerst wird ein Mausklick-Funktion definiert, da wird 1. überprüft ob schon der POPUP geöffnet ist, falls ja, wird bei Mausklick wird wieder alles geschlossen, falls nicht, wird das POPUP geöffnet.
Bei der zweiten Mausklick-Funktion, wird zuerst überprüft ob der Mauszeiger NICHT auf dem POPUP ist und NICHT auf dem PFEIL, falls beides zutrifft wird das POPUP geschlossen.

Hoffe es war verständlich, musste selber lange das Inet durchforsten bis ich auf den entscheidenen Hinweis mit dem Hover gekommen bin. Also keine volle Eigenkreation von mir

Gruß Stenz