fadeIn oraz fadeOut w przeglądarce chrome/edge

0

Witam

Posiadam pewnego diva, który pokazuje się po kliknięciu w odpowiedni przycisk. Poniżej zamieszczam kod js, który jest za odpowiedzialny:

 $(document).ready(function(){
      $("#rozwin_panel_uzytkownika").click(function(){ //jest to id buttona
          $("#panel_uzytkownika").fadeIn(500); //jest to id diva które ma się pojawić

      });
  });

$(document).click(function(e) {
        var $target = $(e.target);
        if (!$target.is('#rozwin_panel_uzytkownika,  #panel_uzytkownika')) { //jeżeli kliknę poza obszar przycisku lub rozwiniętego pola
            $('#panel_uzytkownika').fadeOut(500); //to schowaj podany div
        }
    });  

Gdy klikam w przycisk w przeglądarce firefox, wszystko jest jak w najlepszym porządku. Lecz gdy chcę to zrobić na innej przeglądarce (chrome, edge, safari) to ukryty div pojawia się i od razu znika. Problem występuje tylko wtedy, gdy kliknę w tekst znajdujący się na przycisku (gdy kliknę w przycisk, lecz nie w tekst to działa w 100%). Próbowałem już dodać id tekstu do !$target.is lecz nic to nie pomogło. Poza tym na firefox to działa poprawnie. Poniżej zamieszczam kod elementu po kliknięciu którego pokazuje się ukryty div.

 <button class="uniwersalny_przycisk" id="rozwin_panel_uzytkownika">
	<p style="text-align:center; margin-top: 6px;"> <?php echo $_SESSION['user'] ?> <br/> Mój profil</p>
</button>
0

Gdy klikasz w tekst na przycisku, to zmienna $target wskazuje na element <p>, a nie <button>. Natomiast w Twoim kodzie sprawdzasz, czy element posiada ID #rozwin_panel_uzytkownika. Spróbuj:

if (!$target.parent().is('#rozwin_panel_uzytkownika,  #panel_uzytkownika')) { // ...
0

Skoro korzystasz z jQuery to możesz użyć toggle, wtedy z tego co wkleiłeś zostaje callback dla przycisku (pozbywasz się w sumie zbędnego kodu),) a jeszcze lepiej jak zrobisz to CSSem, dodając i usuwając klasę przy użyciu toggleClass, dzięki czemu będziesz miał większą kontrolę nad animacją.
Inna sprawa - unikaj tego co zrobiłeś w drugiej części, ponieważ JS przy każdym kliknięciu na jakiś element musi go pobrać (co trwa) potem sprawdzić czy jego id jest odpowiednie i dopiero potem wykonać to co ma wykonać. Przy kilku(nastu) takich operacjach może zrobić się ciężki do wykrycia problem. Również kod jest nieoczywisty, ktoś widząc pokazywanie elementu w callbacku po kliknięciu będzie się spodziewać tego samego dla ukrywania elementu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1