Question

简单的事情。我必须在bootstrap中使用手风琴（仅使用jQuery而不使用来自boostrap的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>

手风琴Boostrap在jQuery中

2 个答案: