Скрыть и показать, когда нажать на кнопку

Question

У меня есть такой код (HTML/CSS/JS):

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

 
\t  var $this = $(this).parent().find('.subnav__hover'); 
 
\t  $('.subnav__hover').not($this).hide(); 
 
\t  
 
\t  $this.toggle(); 
 
\t  
 
\t }); 
 

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

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

.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

Я внес небольшие изменения, такие как изменение события документа и добавление e.stopPropagation(). Пожалуйста, проверьте.

$('.subnav__right li a').click(function(e){ 
 
\t  e.preventDefault(); 
 
e.stopPropagation(); 
 
\t  var $this = $(this).parent().find('.subnav__hover'); 
 
\t  $('.subnav__hover').not($this).hide(); 
 
\t  
 
\t  $this.toggle(); 
 
\t  
 
\t }); 
 

 
\t $(document).click(function (e) 
 
\t { 
 
\t  var container = $('.subnav__hover'); 
 

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

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

Я думаю, что функция должна быть щелчок:

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

Bind это обратный вызов или использовать.

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 4

Может быть, удаляя не ! оператор решает проблему (я думаю), так что ваша вторая часть кода 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/

Answer 5

Используйте это:

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