温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Click function with class to work solely for the current selection
html javascript jquery click

javascript - 具有类的单击功能仅适用于当前选择

发布于 2020-03-27 10:23:55

我在使点击功能按预期方式工作时遇到一些困难。当用户单击目录名称旁边的箭头时subViewBoxExpand,仅应针对该特定选择显示。

有人看到我在做什么吗?

$('.arrow').click(function() {
  var i = $(this).next('.subViewBoxExpand'),
    t = $(this).addClass('active');
  i.toggleClass('active', !0).slideToggle(500).find('.subViewBoxExpand').animate({
    opacity: 1
  }, 1500) + t, $('.subViewBoxExpand').not(i, t).slideUp(800).prev().removeClass('active');
  //$('.subViewBoxExpand').toggleClass('active');
});
.subViewBoxExpand {
  display: none;
}

.subViewBoxExpand.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog A</span><span class="arrow"> ></span>
  <div id="totalProfileViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog B</span><span class="arrow"> ></span>
  <div id="totalFastViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>

查看更多

查看更多

提问者
Paul
被浏览
236
guradio 2019-07-03 21:48
  1. 使用.closest()并与.find()组合以获取selected/clicked元素及其相应的视图框。

注意:视图框不在单击的元素旁边

样本: $(this).closest('.catalogSubViewBox').find('.subViewBoxExpand')

更新:删除也在视图中切换的活动类

$('.arrow').click(function() {
  var i = $(this).closest('.catalogSubViewBox').find('.subViewBoxExpand'),
    t = $(this).addClass('active');
  i.slideToggle(500).find('.subViewBoxExpand').animate({
    opacity: 1
  }, 1500) + t, $('.subViewBoxExpand').not(i).slideUp(800).prev().prev().removeClass('active');
  //$('.subViewBoxExpand').toggleClass('active');
});
.subViewBoxExpand {
  display: none;
}

.subViewBoxExpand.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog A</span><span class="arrow"> ></span>
  <div id="totalProfileViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>
<div class="catalogSubViewBox">
  <span class="catalogSubViewBoxTitle">Catalog B</span><span class="arrow"> ></span>
  <div id="totalFastViews"></div>
  <div class="subViewBoxExpand">
    <p>You did it!</p>
  </div>
</div>