javascript - 仅隐藏按下的 li 元素

Question

我有一个 list

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

但是如何隐藏只有按下的情况呢？我需要切换“播放”和“停止”，因此从“播放”开始不显示，然后如果按下“停止”则显示“播放”和“停止”隐藏

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>