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>

アイテムの1つをクリックする方法。次に、このアイテムのみが表示されます。他のアイテムは非表示ですか？

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