jQuery中的Accordion Bootstrap

Question

我必须像在bootstrap中那样制作手风琴（仅使用jQuery，而没有来自bootstrap的JavaScript代码），但是问题是单击后我无法隐藏元素。我的代码是here。

如果您单击代码，将验证div是否具有类，但他每次均返回false。可能是什么原因？

Answer 1

尝试一下：

function accordion() {
            if ($(this).find('.panel-collapse').hasClass('in')) {
                $(this).find('.panel-collapse').removeClass("in");
            } else {
                $(this).find('.panel-collapse').addClass("in");
            };
        };

Answer 2

$(document).ready(function($) {
			$('#accordion').find('.panel-heading').click(function(){
	
				//Expand or collapse this panel
				$(this).next().slideToggle('fast');
	
				//Hide the other panels
		$(".panel-collapse").not($(this).next()).slideUp('fast');
	
			});
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

   
   <div class="panel-group" id="accordion">
        <div id="collapse1" class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a>
        Collapsible Group 1</a>
                </h4>
            </div>
            <div id="collapseContainer1" class="panel-collapse collapse in">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
        </div>
        <div id="collapse2" class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a>
        Collapsible Group 2</a>
                </h4>
            </div>
            <div id="collapseContainer2" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
        </div>
        <div id="collapse3" class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a>
        Collapsible Group 3</a>
                </h4>
            </div>
            <div id="collapseContainer3" class="panel-collapse collapse">
                <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
                  </div>
    </div>