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显示无开始，然后按下停止显示播放和停止隐藏

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

你可以在li元素上分配这样的click事件，然后如果你执行$（this）.toggle（），它应该切换点击的li元素。

{{1}}

仅隐藏按下的li元素

2 个答案: