Пытаюсь сделать следующее:
при клике на div
с id="cd-login-trigger-in"
показывать список и при клике на него же, скрыть этот список, а также скрывать при клике в любой области экрана. Но сейчас при повторном клике на div
, список не скрывается, не понимаю почему. Также не пойму, как можно совместно с этим кодом реализовать тоже самое, только плюс и при наведении, и убирании курсора на div
- показывать и скрывать список, т.е. допустим, если навели просто курсором без клика на div, показать список, как увели курсор - скрыть div, а, если кликнули на div, то показать список и не скрывать его, когда даже курсор будет уведен с div, только лишь по клику в не области скрыть. Я так понимаю дублировать код для mousemove
и 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>