jQuery-显示/隐藏列表中包含内容的项目

Question

我想只单击.btn而不是整个.item来运行该功能。

我尝试使用.closest()将.show添加到最接近.item的{​​{1}}上，但是无法正常运行：

.btn

  $(".btn").click(function(e){
    e.preventDefault();

    var isShowing = false;

    if ($(this).closest(".item").hasClass("show")) {
      isShowing = true
    } 
    ...

$(document).ready(function() {
  var zindex = 10;

  $(".item").click(function(e) {
    e.preventDefault();

    var isShowing = false;

    if ($(this).hasClass("show")) {
      isShowing = true
    }

    if ($(".list").hasClass("showing")) {
      // a card is already in view
      $(".item.show")
        .removeClass("show");

      if (isShowing) {
        // this card was showing - reset the grid
        $(".list")
          .removeClass("showing");
      } else {
        // this card isn't showing - get in with it
        $(this)
          .css({
            zIndex: zindex
          })
          .addClass("show");

      }

      zindex++;

    } else {
      // no cards in view
      $(".list")
        .addClass("showing");
      $(this)
        .css({
          zIndex: zindex
        })
        .addClass("show");

      zindex++;
    }

  });
});

.btn {
  background-color: blue;
  border: 3px solid;
  height: 50px;
  min-width: 50px;
}

.item {
  background: #ffffff;
  display: inline-block;
  margin: 8px;
  max-width: 100px;
  position: relative;
  text-align: left;
  transition: all 0.3s 0s ease-in;
  z-index: 1;
}

.item .item-description {
  padding: 0 15px 10px;
  position: relative;
  font-size: 14px;
}

.item .more-info {
  background: #d9d9d9;
  position: absolute;
  width: 100%;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

.item .more-info {
  transition: all 0.3s 0.3s ease-out;
  z-index: -1;
}

.list.showing .item {
  cursor: pointer;
  opacity: 0.6;
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
}

.no-touch .list.showing .item:hover {
  opacity: 0.94;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}

.item.show {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.item.show .more-info {
  background: #ffffff;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.item.show .more-info {
  transition: all 0.3s 0s ease-out;
}

Answer 1

您的选择器是正确的，您需要使用e.stopPropagation()来防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

注意：：我建议将父项存储在变量中，并在脚本中使用它，而不是像这样每次都重新选择.item

var item = $(this).closest(".item");

$(document).ready(function() {
  var zindex = 10;

  $(".btn").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    var isShowing = false;
    var item = $(this).closest(".item");

    if (item.hasClass("show")) {
      isShowing = true
    }

    if ($(".list").hasClass("showing")) {
      $(".item.show").removeClass("show");

      if (isShowing) {
        $(".list").removeClass("showing");
      } else {
        item.css({
          zIndex: zindex
        }).addClass("show");
      }
      zindex++;
    } else {
      $(".list").addClass("showing");
      item.css({
        zIndex: zindex
      }).addClass("show");
      zindex++;
    }
  });
});

.btn {
  background-color: blue;
  border: 3px solid;
  height: 50px;
  min-width: 50px;
}

.item {
  background: #ffffff;
  display: inline-block;
  margin: 8px;
  max-width: 100px;
  position: relative;
  text-align: left;
  transition: all 0.3s 0s ease-in;
  z-index: 1;
}

.item .item-description {
  padding: 0 15px 10px;
  position: relative;
  font-size: 14px;
}

.item .more-info {
  background: #d9d9d9;
  position: absolute;
  width: 100%;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

.item .more-info {
  transition: all 0.3s 0.3s ease-out;
  z-index: -1;
}

.list.showing .item {
  cursor: pointer;
  opacity: 0.6;
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
}

.no-touch .list.showing .item:hover {
  opacity: 0.94;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}

.item.show {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.item.show .more-info {
  background: #ffffff;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.item.show .more-info {
  transition: all 0.3s 0s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div class="title">
      <div class="btn">
      </div>
      <h2>
        item title
      </h2>
    </div>
    <div class="more-info">
      <div class="item-description">
        Test Hidden
      </div>
    </div>
  </div>
  <div class="item">
    <div class="title">
      <div class="btn">
      </div>
      <h2>
        item title
      </h2>
    </div>
    <div class="more-info">
      <div class="item-description">
        Test Hidden
      </div>
    </div>
  </div>
</div>