使用相同的 class 动画其他元素，但不是这个元素

Question

我有一套信息卡片，当你点击"more information"时，一个隐藏的面板会向上滑动，当你点击"close"或"watch now"时，它会关闭它。

我可以让单独的卡片按照我的需要行事，但我一直在试图找出如何找到具有相同 class 名称的其他面板，如果它们仍然打开，那么当我在任何其他面板上单击 "more information" 时关闭它们，而不关闭我正在与之交互的当前元素。

基本上，如果我单击 "more info" 按钮时所有其他面板处于打开状态，请关闭它们，但不要关闭此面板。

有什么想法吗？

完整示例：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);
    }
  });
});

Answer 1

您可以使用块的索引和 :not(:nth-child(...)) CSS pseudo-classes 到 select 其他块：

var $block = $(this).parents('.block');
var index = $block.index();

$('.block:not(:nth-child(' + index + '))')
  .find('.course-description.full').animate({ top: max }, 250);

在这里找到分叉的笔：https://codepen.io/Aljullu/pen/rdwjgW

但正如其他人评论的那样，重构代码以使用 CSS 而不是 jQuery 来制作动画可能会更好。

Answer 2

根据您的代码，您可以重复使用 'close' 命令并关闭所有打开的描述，然后打开点击的描述：

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

Answer 3

为每个 "more information" 标签添加一个 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>

然后将您的 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'))
      }
      })

这将提醒除您点击的之外的所有 ID 。因此，您可以运行您在这些 ID 上的关闭代码。

使用相同的 class 动画其他元素，但不是这个元素

Animate other elements with same class, but not this element

javascript

jquery

parent

siblings