单击按钮时隐藏和显示
Hide and show when click a button
我有这样的代码 (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
.
知道如何使切换起作用吗?
我觉得点击功能应该是:
$('.subnav__right ul li a').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('.subnav__hover');
$('.subnav__hover').not($this).hide();
$this.toggle();
});
将它绑定到回调或使用它。
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();
});
也许删除 not !
运算符可以解决您的问题(我猜),因此您的 JS 代码的第二部分将是:
$(document).mouseup(function (e)
{
var container = $('.subnav__hover');
if (container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
使用这个:
$(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();
}
});
我做了一些小改动,比如更改文档事件并添加 e.stopPropagation()
。请检查。
$('.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();
}
});
.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>
我有这样的代码 (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
.
知道如何使切换起作用吗?
我觉得点击功能应该是:
$('.subnav__right ul li a').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('.subnav__hover');
$('.subnav__hover').not($this).hide();
$this.toggle();
});
将它绑定到回调或使用它。
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();
});
也许删除 not !
运算符可以解决您的问题(我猜),因此您的 JS 代码的第二部分将是:
$(document).mouseup(function (e)
{
var container = $('.subnav__hover');
if (container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
使用这个:
$(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();
}
});
我做了一些小改动,比如更改文档事件并添加 e.stopPropagation()
。请检查。
$('.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();
}
});
.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>