我在使用JavaScript时遇到了手风琴问题

I'm having an issue with my Accordion.

我的手风琴有问题。

The issue: Everything is working as it should but I have one problem.

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

I'm using click eventListener to clean all Accordions triggers * (buttons)* when I find more then 1 closeIt class.

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

The issue is, if I don't close an active Accordion it won't add the active class because it cleans everything.

问题是,如果我不关闭活动的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>

2 个解决方案

#1

I have updated the snippet. Remove the below code from the javascript function if you want to keep the accordion open on same button's second click.

我已更新了代码段。如果你想在同一个按钮的第二次点击时保持手风琴打开,请从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>

#2

Hey take care of the event propagation, you attached to the window the function clean everytime is clicked. If you click a btn this event is bubbling to the window and it runs clean. You can avoid this like this:

嘿照顾事件传播,你附加到窗口每次点击功能干净。如果你单击一个btn,这个事件冒泡到窗口,它运行干净。你可以这样避免这样:

if you add onclick="showAcord(event, 1)

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

and then

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

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

this way you avoid cleaning when a btn is clicked

这样你就可以避免在点击btn时进行清洁