[英]Animate other elements with same class, but not this element
I have a set of info cards that when you click "more information" a hidden panel will slide up, and when you click "close" or "watch now" it will close it. 我有一组信息卡,当您单击“更多信息”时,一个隐藏的面板将向上滑动,而当您单击“关闭”或“立即观看”时,它将关闭它。
I can get the individual cards to act how I need, but I've been trying to figure out how to find the other panels with the same class name, and if those are still open, then close them when I click "more information" on any other panel, without closing the current element I'm interacting with. 我可以根据需要使用各个卡,但是我一直在尝试找出如何找到具有相同类名的其他面板,如果这些面板仍处于打开状态,请在单击“更多信息”时将其关闭。在任何其他面板上,而无需关闭与之交互的当前元素。
Essentially, close all other panels if they're open when I click the "more info" button, but don't close this panel. 本质上,如果我单击“更多信息”按钮时打开了所有其他面板,请关闭它们,但不要关闭此面板。
Any ideas? 有任何想法吗?
Full example: https://codepen.io/otajnorthrup/pen/PRjPpB 完整示例: https : //codepen.io/otajnorthrup/pen/PRjPpB
var min = '0px', max = '460px';
$(function () {
$('.course').find('.more-info').click(function () {
//when clicking the "more information" link, how do I close any/all other ".course-description.full" elements that are showing?
if ($(this).parent().next('.course-description.full').css('top') == max) {
$(this).parent().next('.course-description.full').animate({ top: min }, 250);
}
});
$('.course-description.full').find('.close-description, .watch-now').click(function () {
if ($(this).parents('.course-description.full').css('top') == min) {
$(this).parents('.course-description.full').animate({ top: max }, 250);
}
});
});
You can use the index of the block and :not(:nth-child(...))
CSS pseudo-classes to select the other blocks: 您可以使用块的索引和
:not(:nth-child(...))
CSS伪类来选择其他块:
var $block = $(this).parents('.block');
var index = $block.index();
$('.block:not(:nth-child(' + index + '))')
.find('.course-description.full').animate({ top: max }, 250);
Find the forked pen here: https://codepen.io/Aljullu/pen/rdwjgW 在这里找到分叉的笔: https : //codepen.io/Aljullu/pen/rdwjgW
But as the others have commented, it might be better to refactor the code to use CSS for the animations instead of jQuery. 但是正如其他人所评论的那样,最好将代码重构为将CSS用于动画而不是jQuery。
According to you code, you can just reuse the 'close' command and close any opened description, then you open the clicked one: 根据您的代码,您可以重复使用“关闭”命令并关闭所有打开的描述,然后打开单击的描述:
var min = '0px', max = '460px';
$(function () {
$('.course').find('.more-info').click(function () {
$('.course-description.full').animate({ top: max }, 250); //ADD THIS LINE
if ($(this).parent().next('.course-description.full').css('top') == max) {
$(this).parent().next('.course-description.full').animate({ top: min }, 250);
}
});
$('.course-description.full').find('.close-description, .watch-now').click(function () {
if ($(this).parents('.course-description.full').css('top') == min) {
$(this).parents('.course-description.full').animate({ top: max }, 250);
}
});
});
Add an id to each "more information" tag: 为每个“更多信息”标签添加一个ID:
<a id='info_1' class="more-info">More Information</a>
<a id='info_2' class="more-info">More Information</a>
<a id='info_3' class="more-info">More Information</a>
Then compare your clicked_id to the id being looped through on click: 然后将您的clicked_id与点击时循环显示的ID进行比较:
$('.course').find('.more-info').click(function () {
clicked_id = $(this).attr('id')
$('.more-info').each(function() {
if($(this).attr('id') != clicked_id) {
alert($(this).attr('id'))
}
})
This will alert all ids other than the one you clicked . 这将提醒除您单击的 ID 以外的所有ID。 Thus you can run your close code on those ids.
因此,您可以在这些ID上运行关闭代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.