简单的手风琴不能正确闭合

Question

我的任务是在不使用现有示例的情况下创建简单的accordion。这个想法并不新鲜。DOM中有title和description元素。单击标题后，描述将打开。再次单击此标题关闭描述。单击另一个标题将关闭打开的描述，并打开所单击标题的描述。所以我写了下一段代码，它通过点击标题打开描述，当点击另一个标题时关闭它，并打开相关的描述。但是有下一个问题。我点击title，描述就会打开。我再次点击这个标题，但描述没有关闭。

这是我的DOM：

​

    (function($) {
        $(function() {
            var $title = $('.accordion .title');
            var $desc = $('.desc');
            var activateClass = 'active';
            function accordion() {
                $title.click(function() {
                    $this = $(this);
                    
                    if ($desc.hasClass(activateClass)) {
                    	$desc.removeClass(activateClass);
                    }
    
                    if ($this.next().hasClass(activeClass)) {
                    	$this.next().removeClass(activeClass)
                    } else {
                    	$this.next().addClass();
                    }
                    
                });
            }
    
            accordion();
        });
    
    })(jQuery);

    ul {
        list-style: none;
    }
    
    ul li.title {
        border: 1px solid #0F0F0F;
        background: #CCCCCC;
        font-size: 1.4rem;
        margin: 0 10px 0px 10px;
        padding: 6px 8px;
    }
    
    ul li.desc {
        display: none;
        font-size: 1.2rem;
        padding: 8px 16px;
        text-align: justify;
    }
    
    ul li.active {
        display: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
        <li class="title">Title-1</li>
        <li class="desc">Description-1
        <li class="title">Title-2</li>
        <li class="desc">Description-2</li>
    </ul>

​

Answer 1

您的代码给出了一个错误，undefined activeClass请始终关注控制台错误。您可以只使用两行代码，而不是所有的类检查

$('.desc').not($this.next('.desc')).removeClass('active'); // remove active class from all desc elements but not the one which next to the title you click
$this.next('.desc').toggleClass('active'); // toggleClass active to desc next to the title clicked

工作示例

​

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

    function accordion() {
        $title.click(function() {
           $this = $(this);
           $desc.not($this.next('.desc')).removeClass('active');
           $this.next('.desc').toggleClass('active');
        });
    }
    
    accordion();
});

ul {
    list-style: none;
}

ul li.title {
    border: 1px solid #0F0F0F;
    background: #CCCCCC;
    font-size: 1.4rem;
    margin: 0 10px 0px 10px;
    padding: 6px 8px;
}

ul li.desc {
    display: none;
    font-size: 1.2rem;
    padding: 8px 16px;
    text-align: justify;
}

ul li.active {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
    <li class="title">Title-1</li>
    <li class="desc">Description-1
    <li class="title">Title-2</li>
    <li class="desc">Description-2</li>
</ul>

​