单击按钮时隐藏和显示

Question

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?

Answer 1

Use this:

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

Answer 2

I have made small changes like change the document event and add e.stopPropagation() . Please check.

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

Answer 3

I think the click function should be:

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

Bind this to the callback or use that.

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

Maybe removing the not ! operator solves your problem (I guess), so your 2nd part of your JS code will be:

$(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/