javascript - 单击按钮时隐藏和显示

Question

我有这样的代码(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>

问题是切换功能(当我单击 .subnav__right li a 时)不起作用。但是点击外面可以隐藏.subnav__hover。

知道如何使切换起作用吗？

Answer 1

使用这个:

$(document).mouseup(function (e)
{
	    var container = $('.subnav__hover:visible');
        var clickedObj = $(e.target).next('.subnav__hover');
	    if (!container.is(clickedObj) && container.has(e.target).length === 0)
	    {
	        container.hide();
	    }
});