时间戳

首页 > 解决方案 > 我在使用 JavaScript 的手风琴时遇到问题

javascript - 我在使用 JavaScript 的手风琴时遇到问题

问题描述

我的手风琴有问题。

问题：一切正常，但我有一个问题。

当我发现超过1 个 closeIt类时，我正在使用 click eventListener 来清理所有 Accordions 触发器 *（按钮）*。

问题是，如果我不关闭活动的 Accordion，它将不会添加活动类，因为它会清除所有内容。

function showAcord(n) {
  var $bro = "magic-" + n,
    $par = document.getElementById($bro);

  var $j = document.getElementsByClassName('acord-active'),
    i = $j.length;

  while (i--) {
    $j[i].classList.remove("acord-active");
  }

  $par.classList.toggle("acord-active");

  // Close It Condição
  var $myClass = document.getElementsByClassName('closeIt');

  var $selector = "btn-" + n,
    $btn = document.getElementById($selector);

  if ($btn.classList.contains("closeIt")) {
    var $j = document.getElementsByClassName('acord-active'),
      i = $j.length;

    while (i--) {
      $j[i].classList.remove("acord-active");
    }

    var $checkIcons = document.getElementsByClassName('closeIt'),
      y = $checkIcons.length;

    while (y--) {
      $checkIcons[y].classList.remove("closeIt");
    }

  } else {
    $btn.classList.toggle("closeIt");
  }
}

// EventListener
(function() {
  window.addEventListener('click', clean);

  function clean() {
    var $cleaner = document.getElementsByClassName('closeIt');
    var $loop = $cleaner.length;

    if ($loop > 1) {
      while ($loop--) {
        $cleaner[$loop].classList.remove("closeIt");
      }
    }
  }
})()
.openIt:before {
  content: "\f078";
  font-family: fontawesome;
  margin-right: 5px;
  color: #fff;
  font-size: 20px;
}

.closeIt:before {
  content: "\f077";
  font-family: fontawesome;
  margin-right: 5px;
  font-size: 20px;
  color: #f6a61d;
}

.acord-off {
  z-index: -1;
  transform: scaleY(0);
  position: absolute !important;
}

.acord-active {
  z-index: 1;
  transform: scaleY(1);
  position: inherit !important;
}
<div class="container">
  <article>
    <div class="col-sm-12 pt-3 mb-5 aligncenter">
      <h2>Ibbca Accordeon</h2>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <a class="btn btn-info openIt" name="button" onclick="showAcord(1)" id="btn-1">Mostrar acord 1</a>
          </div>
          <div class="col-sm-6">
            <a class="btn btn-info openIt" name="button" onclick="showAcord(2)" id="btn-2">Mostrar acord 2</a>
          </div>
        </div>
      </div>

      <div id="magic-1" class="acord-1 acord-off">
        <p>Texto II</p>
      </div>
      <div id="magic-2" class="acord-2 acord-off">
        <p>Texto III</p>
      </div>
    </div>
  </article>
</div>

标签： javascripthtmlcss

解决方案

clean嘿，请注意事件传播，您每次单击时都将函数附加到窗口。如果单击 btn，此事件将冒泡到窗口并运行clean。您可以像这样避免这种情况：

如果你添加onclick="showAcord(event, 1)

接着

function showAcord(event, n) { event.stopPropagation(); ...

这样可以避免在btn单击a 时进行清理

推荐阅读