javascript - 我在使用 JavaScript 时遇到了 Accordion 问题

Question

我的 Accordion 有问题。

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

当我发现超过 1 个 closeIt 类时，我正在使用 click eventListener 清除所有 Accordion 触发器 *(按钮)*。

问题是，如果我不关闭事件的 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>

Answer 1

我已经更新了代码片段。如果您想在同一按钮的第二次单击时保持 Accordion 打开，请从 javascript 函数中删除以下代码。

if($par.classList.contains("acord-active")){
    $par.classList.remove("acord-active");
    $btn.classList.remove("closeIt");

    return;
}

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

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

//REMOVE BELOW CONDITION IF YOU WANT TO KEEP THE ACCORDION OPEN ON SAME BUTTON'S SECOND CLICK.
    if($par.classList.contains("acord-active")){
      $par.classList.remove("acord-active");
      $btn.classList.remove("closeIt");
      
      return;
    }


  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 $myClassi = $myClass.length;

  while ($myClassi--) {
    $myClass[$myClassi].classList.remove("closeIt");
  }

  if ($btn.classList.contains("closeIt")) {     
    $btn.classList.remove("closeIt");
  } else {
    $btn.classList.add("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>