Trying to do the following:

when you click on a div with id="cd-login-trigger-in" show the list and when you click on it, hide this list, and also hide it when you click anywhere in the screen. But now when you re-click on the div , the list is not hidden, I do not understand why. Also, I don’t understand how to implement the same thing together with this code, only plus when hovering and dragging the cursor over the div - show and hide the list, i.e. suppose if you just hover over the cursor without clicking on the div, show the list, how to increase the cursor to hide the div, and if you clicked on the div, then show the list and not hide it when even the cursor is gone with the div, just by clicking on no hide area. I understand duplicate code for mousemove and mouseout ?

 $('#cd-login-trigger-in').click(function() { $('#cd-login-trigger-in').toggleClass('visible'); $('.my-profil').fadeIn(); }); $(document).mouseup(function (e) { var container = $(".my-profil"); if (e.target!=container[0]&&!container.has(e.target).length){ container.fadeOut(); $('#cd-login-trigger-in').removeClass('visible'); } }); 
 .my-profil{ display:none; } #cd-login-trigger-in .js-a{ color:#000; } #cd-login-trigger-in.visible .js-a{ color:red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cd-login-trigger-in"> <a href="javascript:void(0)"> <p class="js-a">Профиль</p></a> <ul class="my-profil"> <li class="my-profil-item"> <span>Мой профиль</span> </li> </ul> </div>

    1 answer 1

    toggledByClick variable, which we change by click and which is responsible for ensuring that the block does not hide when the cursor is moved.
    Hiding-displaying a container is better to take to a separate function toggleContainer , if you decide to change the animation to another one later, you will not need to do a bunch of replacements via ctrl + f.

     var container = $(".my-profil"); var buttonWrapper = $('#cd-login-trigger-in'); var button = buttonWrapper.find('.js-a'); var toggledByClick = false; button.click(function() { toggledByClick = !toggledByClick; toggleContainer(toggledByClick); }); buttonWrapper.hover(function() { toggleContainer(true); }, function() { if (!toggledByClick) { toggleContainer(false); } }); $(document).mouseup(function(e) { if ( $(e.target).closest('#cd-login-trigger-in').size() === 0 && $(e.target).closest('.my-profil').size() === 0) { toggledByClick = false; toggleContainer(false); } }); function toggleContainer(display) { if (display) { container.fadeIn(); } else { container.fadeOut(); } $('#cd-login-trigger-in').toggleClass('visible', display); } 
     .my-profil { display: none; } #cd-login-trigger-in .js-a { color: #000; } #cd-login-trigger-in.visible .js-a { color: red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="cd-login-trigger-in"> <a href="javascript:void(0)" class="js-a"> <p>Профиль</p> </a> <ul class="my-profil"> <li class="my-profil-item"> <span>Мой профиль</span> </li> </ul> </div>

    • works with glitches - Raz Galstyan
    • Added a refined check for clicking on the document. - br3t
    • Made changes to the code - br3t
    • And now?. . . . - br3t
    • Try changing to .length . In the snippet works, the error is somewhere for you. - br3t