Question

我有一组信息卡，当您点击＆＃34;更多信息＆＃34;隐藏的面板将向上滑动，当您单击＆＃34;关闭＆＃34;或者＆＃34;现在观看＆＃34;它将关闭它。

我可以让个人卡片按照我需要的方式行事，但我一直在试图找出如何找到具有相同类名的其他面板，如果这些面板仍然打开，那么当我关闭时点击＆＃34;更多信息＆＃34;在任何其他面板上，不关闭我与...交互的当前元素。

基本上，当我点击＆＃34;更多信息＆＃34;按钮，但不要关闭此面板。

有什么想法吗？

完整示例：https://codepen.io/otajnorthrup/pen/PRjPpB

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-one" data-role="page">
    <div class="ui-field-contain">
      <label for="select-custom-19">Multiple:</label>
      <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="1">The 1st Option</option>
        <option value="2">The 2nd Option</option>
        <option value="3">The 3rd Option</option>
        <option value="4">The 4th Option</option>
      </select>
    </div>
    <pre id="options">Options:<span></span></pre>
  </div>
</body>

</html>

Answer 1

您可以使用块的索引和: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);

在这里找到分叉笔：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

为每个“更多信息”标记添加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上运行您的密码。

使用相同的类动画其他元素，但不是此元素

3 个答案: