Скрыть только нажимается Li элемент

Question

У меня есть список

 <ul id="navigation"> 
      <li class="ZoomIn" id="ZoomIn"><input type="button" title="ZoomIn"/></li> 
      <li class="Download" id="Download"><input type="button" title="Download"/></li> 
      <li class="Play" id="Play" style="display:none"><input class="pressed" type="button" title="Play"/></li> 
      <li class="Stop" id="Stop"><input type="button" title="Stop" /></li> 
     </ul> 

Этот код скрыть все элементы Li

$("#navigation").click(function(){$("li", this).toggle();}); 

но как скрыть только нажатие? Мне нужно переключить Play и Stop, поэтому начните с Play display none, а затем, если нажать Stop show Play и Stop hide

Answer 1

Проверить это решение.:

$(document).on('click', '#navigation li', function() { 
 
    var that = $(this); 
 
    if (that.attr('id') == 'Stop') { 
 
     that.hide(); 
 
     $('#Play').show(); 
 
    } 
 
    if (that.attr('id') == 'Play') { 
 
     that.hide(); 
 
     $('#Stop').show(); 
 
    } 
 
});

#Play { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="navigation"> 
 
      <li class="ZoomIn" id="ZoomIn"><input type="button" title="ZoomIn"/></li> 
 
      <li class="Download" id="Download"><input type="button" title="Download"/></li> 
 
      <li class="Play" id="Play" style="display:none"><input class="pressed" type="button" title="Play"/>Play</li> 
 
      <li class="Stop" id="Stop"><input type="button" title="Stop" />Stop</li> 
 
     </ul>

Answer 2

Вы можете назначить событие click, подобное этому, на элементе li, тогда, если вы выполните $ (this) .toggle(), он должен переключаться на элемент li.

$("#navigation li").click(function(){$(this).toggle();});