I have code like this (HTML/CSS/JS):
$('.subnav__right li a').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('.subnav__hover');
$('.subnav__hover').not($this).hide();
$this.toggle();
});
$(document).mouseup(function (e)
{
var container = $('.subnav__hover');
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
.subnav__hover{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="subnav__right">
<ul>
<li class="subnav__notif">
<a href="#" class="np-ico-notification">Link 1</a>
<div class="subnav__hover"> CONTENT 1</div>
</li>
<li class="subnav__caremail">
<a href="#" class="np-ico-caremail">Link 2</a>
<div class="subnav__hover"> CONTENT 2</div>
</li>
<li class="subnav__profile">
<a href="#">Link 3</a>
<div class="subnav__hover"> CONTENT 3</div>
</li>
</ul>
</div>
The problem is toggle function (when I click .subnav__right li a
) doesn't work. But click the outside can hide .subnav__hover
.
Any idea how to make the toggle works?
I have made small changes like change the document event and add
e.stopPropagation()
. Please check.