Question

我有一小部分列表项：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

每个列表项都是可点击的。点击某个项目后，我想隐藏所有未点击的项目。

$('.locations li').click(function() {

    // hide list items NOT clicked        

});

任何人都知道我怎么能发现它？

Answer 1

隐藏所有元素，然后显示当前元素。以下应该可以解决问题。

$('.locations li').click(function() {

    $('.locations li').hide();
    $(this).show();     

});

Answer 2

试试这个：

$('ul.list li ').click(function(){
  $('ul.list li').hide(); // Hide the elements
  $(this).show(); // Show the clicked element
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

来自维也纳的问候

Answer 3

如果您尝试这样做很容易：

http://jsfiddle.net/csdtesting/zq0q77qu/

$('li').click(function() {
  $('li').not($(this)).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Answer 4

上述答案的改进版本将是： http://jsfiddle.net/zq0q77qu/2/

这更有效，因为您只是对项目进行一次查询。请注意兄弟姐妹的查询，因为上面的答案会为您提供页面上的每个标记，因为我希望您不需要。

$('li').click(function() {
 $(this).siblings().hide();   
});

检测未单击的列表项

4 个答案: