将 jQuery 脚本转换为 bootstrap 在 iframe 顶部折叠导航栏下拉列表的计划 JS

Question

我正在尝试将 jQuery 脚本转换为纯 JS。这个脚本是为了解决我的网站上的一个问题，我有一个带有下拉菜单的导航栏，屏幕的其余部分有一个 iframe。

如果没有此脚本，单击 iframe 中的任何位置时，下拉菜单不会折叠。 jQuery 有效，但我无法让 JS 正常工作并且对 JS 了解不多

$(window).on("blur", function() {
  $(".dropdown").removeClass("show"), 
  $(".dropdown-menu").removeClass("show"),
  $(".dropdown-toggle").attr("aria-expanded", !1).focus()
});

window.blur(), 
document.getElementsByClassName('dropdown').classList.remove('show'), 
document.getElementsByClassName('dropdown-menu').classList.remove('show'), 
document.getElementsByClassName('dropdown-toggle').getAttribute("aria-expanded", !1).focus;

Answer 1

您没有提供html，所以回答这个问题并不容易。

ES6 方式

window.onblur = () => {
  const
    removeClass = (el, className) => el.classList.remove(className),
    dropdowns = document.getElementsByClassName('dropdown'),
    menus = document.getElementsByClassName('dropdown-menu'),
    togglers = document.getElementsByClassName('dropdown-toggle')

  for (const d of dropdowns) removeClass(d, 'show')
  for (const m of menus) removeClass(m, 'show')
  for (const t of togglers) t.getAttribute('aria-expanded', false).focus
}

.dropdown {
  display: none;
}

.dropdown.show {
  display: initial;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: initial;
}

<div class="dropdown-toggle" aria-expanded="true">
  toggler
</div>
<div class="dropdown show">
  <div class="dropdown-menu show">
    menu
  </div>
</div>

老办法

window.onblur = function () {
  function removeClass(el, className) {
    el.classList.remove(className)
  }

  // When calling `getElementsByClassName, you get collection of elements
  // So you can't call `classList` method on it
  var dropdowns = document.getElementsByClassName('dropdown')
  var menus = document.getElementsByClassName('dropdown-menu')
  var togglers = document.getElementsByClassName('dropdown-toggle')

  // You have to iterate over found elements
  for (var i = 0; i < dropdowns.length; i++) removeClass(dropdowns[i], 'show')
  for (var i = 0; i < menus.length; i++) removeClass(menus[i], 'show')
  for (var i = 0; i < togglers.length; i++) togglers[i].getAttribute('aria-expanded', false).focus
}

将 jQuery 脚本转换为 bootstrap 在 iframe 顶部折叠导航栏下拉列表的计划 JS

Convert jQuery Script to plan JS for bootstrap nav bar drop down collapse on top of iframe

html

javascript

css

iframe

jquery

ES6 方式

老办法