我在使点击功能按预期方式工作时遇到一些困难。当用户单击目录名称旁边的箭头时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>
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>
知道为什么框在第一次单击时立即打开和关闭吗?
检查链条中的幻灯片
嗯..我试着没有删除
t
变量。没有帮助。.not(i, t)
@Paul删除了也在上面切换过的addClass active