无法读取速记 javascript/查询

Question

我花了很长时间试图理解 bootstrap 的导航栏，主要是花 4-5 天阅读 stackoverflow 帖子

& 最后我想我找到了一个有帮助的answer！！！

麻烦的是，我无法理解随附的 javascript/jquery 代码。我猜它是 js 的简写版本或其他东西，但它的含义我无法破译

基本上，它是出现在this jsfiddle 页面上的 javascript 代码

$('.navbar').on('show', function () {
  var actives = $(this).find('.collapse.in'),
    hasData;

  if (actives && actives.length) {
      hasData = actives.data('collapse')
      if (hasData && hasData.transitioning) return
      actives.collapse('hide')
      hasData || actives.data('collapse', null)
  }
});

所以，如果有人可以逐行向我解释代码在做什么，那就太好了

我理解的第一行。接下来 6 行中奇怪的语法让我感到困惑

Answer 1

  var actives = $(this).find('.collapse.in'),
    hasData;

这会创建两个变量。一个是从当前范围中挑选的与选择器 .collapse.in 匹配的元素，一个是空变量。

if (actives && actives.length) 

如果 actives 存在并且包含超过零个元素，请执行以下操作...

hasData = actives.data('collapse')

检索存储在密钥 collapse 下的任意数据。请参阅https://api.jquery.com/jquery.data/ 了解更多信息。

if (hasData && hasData.transitioning) return

如果hasData 存在且hasData.transitioning 为真，则停止函数执行。

actives.collapse('hide')

在actives 上调用collapse 函数。这不是原生 jQuery 函数，因此您必须查找它来自的任何插件才能理解传入的参数。

hasData || actives.data('collapse', null)

如果hasData 是真实的，请跳过此行。否则，将actives变量中的任意数据设置为null。