jquery - 隐藏其他 div 元素

Question

我有一些代码：

  <div class="container">
      <div class="items">item1</div>
      <div class="items">item2</div>
      <div class="items">item3</div>
      <div class="items">item4</div>
  </div>

我如何单击其中一项。然后只有这个项目是可见的。其他项目是隐藏的？

Answer 1

您可以使用not选择器将所有 div 包含在一个类中并排除当前 div。

代码：

 $(".items").click(function () {
     $(".items").not(this).hide();
 })

演示：http: //jsfiddle.net/IrvinDominin/BWUje/

Answer 2

一个快速的解决方案可能是：

var items = $('.items');
items.on('click', function () {
   items.hide();
   $(this).show();
});

Answer 3

在 HTML 中

<div class="container">
      <div class="items">item1</div>
      <div class="items">item2</div>
      <div class="items">item3</div>
      <div class="items">item4</div>
  </div>

在 JS 中

$(".items").click(function(){
    $(this).parent().find(".item").hide();
    $(this).show();
}):

参考显示和隐藏

Answer 4

尝试这个：

$(function () {
    $(".items").on("click", function () {
        // Hide all
        $(".items").hide();
        // Show clicked
        $(this).show();
    });
});