Question

晚上好！我用addClass（）/ removeClass（）方法实现了accordion功能。有： 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

您需要做的就是将if.. else块替换为.toggleClass()，例如确保您还使用$text.removeClass('active');，以便删除{{1}上的任何active类元素。

以下代码评论中有更多解释。

.text

/* 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;
}

Answer 2

您只需在.active上切换.title即可简化此操作，然后使用CSS同级选择器切换.text的显示

＆＃13;

(function($) {
  $(function() {
    function accordion() {
      var $clicked = $(".title");
      var $text = $(".text");

      $clicked.click(function() {
        $clicked.not($(this)).removeClass('active');
        $(this).toggleClass('active');
      });
    }
    accordion();
  });
})(jQuery);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

手风琴使用toggleClass（）而不是addClass（）/ removeClass（）

2 个答案: