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

快速解决方案可能是：

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

Answer 2

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

代码：

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

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

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

参考show和hide

Answer 4

试试这个：

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

隐藏其他div元素

4 个答案: