以手風琴的形式使用toggleClass（）而不是addClass（）/ removeClass（）

Question

晚上好！我使用addClass（）/ removeClass（）方法實現手風琴功能。主要有：1。 HTML

<div class="container"> 
    <div class="functionality">Accordion</div> 
    <ul class="accordion-wrapper"> 
     <li> 
      <div class="title">Title</div> 
      <div class="text">Description</div> 
     </li> 
     <li> 
      <div class="title">Title</div> 
      <div class="text">Description</div> 
     </li> 
     <li> 
      <div class="title">Title</div> 
      <div class="text">Description</div> 
     </li> 
    </ul> 
</div> 

2.CSS

ul { 
    list-style: none; 
} 

.accordion-wrapper .title { 
    border: 1px solid #0F0F0F; 
    background: #CCCCCC; 
    font-size: 14px; 
    margin: 0 10px 0 10px; 
    padding: 6px 8px; 
    cursor: pointer; 
} 

.accordion-wrapper .text { 
    display: none; 
    font-size: 12px; 
    padding: 8px 16px; 
    text-align: justify; 
} 

.accordion-wrapper .active { 
    display: block; 
} 

.functionality { 
    font-size: 16px; 
    margin: 12px 8px; 
    padding: 6px 8px; 
} 

3.JS

(function($) { 
    $(function() { 
     function accordion() { 
      var $clicked = $('.title'); 
      var $text = $('.text'); 

      $clicked.click(function() { 
       var $instance = $(this); 
       var $currentText = $instance.closest('li').find('.text'); 
       if ($currentText.hasClass('active')) { 
        $currentText.removeClass('active'); 
       } else { 
        $text.removeClass('active'); 
        $currentText.addClass('active'); 
       } 
      }); 
     } 
     accordion(); 
    }); 

})(jQuery); 

但我認爲，我可以使用toggleClass（把它改造），而不是OG addClass （）和removeClass（）。你可以幫我嗎？但是，不要創造新的手風琴 - 只是將現有 感謝

Answer 1

所有你需要做的是用.toggleClass()取代你if.. else塊喜歡請確保您還使用$text.removeClass('active');使您免除在.text元素的任何active類。

下面的代碼註釋中有更多解釋。

/* I've refactored your JS */ 
 

 
(function accordion($) { 
 
    //not caching variables as they are used only once 
 

 
    $('.title').on('click', function() { 
 
    //no need of closest and find, simple .next() is enough here 
 
    var $currentText = $(this).next(); 
 
    
 
    //replace your if.. else with the below lines 
 
       
 
    /* add this to remove all active classes which you 
 
     appended previously, you don't need this if you are 
 
     fine keeping multiple dropdown in active state */ 
 
     $('.text').not($currentText).removeClass('active'); 
 

 
     /* Here, we toggle the active class */ 
 
     $currentText.toggleClass('active'); 
 
    }); 
 
})(jQuery); //passing jQuery to iife function

ul { 
 
    list-style: none; 
 
} 
 

 
.accordion-wrapper .title { 
 
    border: 1px solid #0F0F0F; 
 
    background: #CCCCCC; 
 
    font-size: 14px; 
 
    margin: 0 10px 0 10px; 
 
    padding: 6px 8px; 
 
    cursor: pointer; 
 
} 
 

 
.accordion-wrapper .text { 
 
    display: none; 
 
    font-size: 12px; 
 
    padding: 8px 16px; 
 
    text-align: justify; 
 
} 
 

 
.accordion-wrapper .active { 
 
    display: block; 
 
} 
 

 
.functionality { 
 
    font-size: 16px; 
 
    margin: 12px 8px; 
 
    padding: 6px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="functionality">Accordion</div> 
 
    <ul class="accordion-wrapper"> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 2

您可以通過只在.title切換.active簡化這個，然後使用CSS兄弟選擇切換的.text

(function($) { 
 
    $(function() { 
 
    function accordion() { 
 
     var $clicked = $(".title"); 
 
     var $text = $(".text"); 
 

 
     $clicked.click(function() { 
 
     $clicked.not($(this)).removeClass('active'); 
 
     $(this).toggleClass('active'); 
 
     }); 
 
    } 
 
    accordion(); 
 
    }); 
 
})(jQuery);

ul { 
 
    list-style: none; 
 
} 
 

 
.accordion-wrapper .title { 
 
    border: 1px solid #0F0F0F; 
 
    background: #CCCCCC; 
 
    font-size: 14px; 
 
    margin: 0 10px 0 10px; 
 
    padding: 6px 8px; 
 
    cursor: pointer; 
 
} 
 

 
.accordion-wrapper .text { 
 
    display: none; 
 
    font-size: 12px; 
 
    padding: 8px 16px; 
 
    text-align: justify; 
 
} 
 

 
.active + .text { 
 
    display: block; 
 
} 
 

 
.functionality { 
 
    font-size: 16px; 
 
    margin: 12px 8px; 
 
    padding: 6px 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="functionality">Accordion</div> 
 
    <ul class="accordion-wrapper"> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
     <li> 
 
      <div class="title">Title</div> 
 
      <div class="text">Description</div> 
 
     </li> 
 
    </ul> 
 
</div>