Question

我有这样的代码（HTML / CSS / JS）：

＆＃13;

  <li ng-repeat="test in lists.Tests">
    <label>
        <input type="checkbox" id="cbxAcceptTest" ng-checked="{{test.IsAccepted}}"  ng-click="testSelection(test)" />
    </label>

＆＃13;

$('.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();
	    }
	});

＆＃13;

.subnav__hover{
  display: none;
 }

＆＃13;

问题是切换功能（当我点击<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。

知道如何使切换工作吗？

Answer 1

使用此：

＆＃13;

([x,z], i:j:s, b)

＆＃13;

Answer 2

我做了一些小改动，比如更改文档事件并添加e.stopPropagation()。请检查。

＆＃13;

$('.subnav__right li a').click(function(e){
	    e.preventDefault();
e.stopPropagation();
	    var $this = $(this).parent().find('.subnav__hover');
	    $('.subnav__hover').not($this).hide();
	    
	    $this.toggle();
	    
	});

	$(document).click(function (e)
	{
	    var container = $('.subnav__hover');

	    if (!container.is(e.target) && container.has(e.target).length === 0)
	    {
	        container.hide();
	    }
	});

＆＃13;

.subnav__hover{
  display: none;
 }

＆＃13;

<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>

＆＃13;

Answer 3

我认为点击功能应该是：

$('.subnav__right ul li a').click(function(e){
    e.preventDefault();

    var $this = $(this).parent().find('.subnav__hover');
    $('.subnav__hover').not($this).hide();

    $this.toggle();
});

Answer 4

将此绑定到回调或使用它。

var that = this;
$('.subnav__right li a').click(function(e){
    e.preventDefault();

    var $this = $(that).parent().find('.subnav__hover');
    $('.subnav__hover').not($this).hide();

    $this.toggle();

});

Answer 5

也许删除not !运算符可以解决您的问题（我猜），因此您的JS代码的第二部分将是：

$(document).mouseup(function (e)
{
    var container = $('.subnav__hover');

    if (container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

http://jsfiddle.net/fsoh6h3z/1/

单击按钮时隐藏和显示

5 个答案: