JSFiddle - React, Tailwind, and code Playground

クリック連打対策最低限おｋ ※今のとこイベント1つでも動いてると、他受け付けない

by yshrkn

HTML

<div class="accrdn">
  <p class="accrdn-title">title1</p>
  <ul class="accrdn-contents">
    <li class="content"><a href="#">content1</a></li>
    <li class="content"><a href="#">content2</a></li>
    <li class="content"><a href="#">content3</a></li>
  </ul>
</div>

<div class="accrdn">
  <p class="accrdn-title">title2</p>
  <ul class="accrdn-contents">
    <li class="content"><a href="#">content1</a></li>
    <li class="content"><a href="#">content2</a></li>
    <li class="content"><a href="#">content3</a></li>
  </ul>
</div>

<div class="accrdn">
  <p class="accrdn-title">title3</p>
  <ul class="accrdn-contents">
    <li class="content"><a href="#">content1</a></li>
    <li class="content"><a href="#">content2</a></li>
    <li class="content"><a href="#">content3</a></li>
  </ul>
</div>

SCSS

.accrdn{

  .accrdn-title {
    background: orange;
  }
  
  .accrdn-title {
    padding: 10px;
  }
  
  .accrdn-contents {
    display: none;
    
    .content {
      border-bottom: 1px solid #333;
      
      >a {
       display: block; 
       padding: 10px;
       text-decoration: none;
       
       &:hover {
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
         opacity: 0.7;
        }
      }

      &:first-child {
        margin-top: 0;
        border-top: none;
      }
    } 
  }

}

JavaScript

$(function() {

  function addEvent() {
  	var isAnimate = false;
    $(".accrdn-title").on("click", function(e) {
      //console.log("e", e);
      //var currentIndex = e.currentTarget.parentNode.className;
      //console.log("currentIndex", currentIndex);
      if (isAnimate) {
        return;
      } else {
        isAnimate = true;
        $(this).next().slideToggle(function(){
          isAnimate = false;
        });
      }
    });
  }

  function init() {
    addEvent();
  }
  
  init();
});