javascript - 无法读取简写的 javascript/query

Question

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

&最后我想我找到了answer这有帮助!!!

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

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

$('.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。