panel1

panel1

关注
发信
关注(28)粉丝(399)

javascript - 打开并单击JS样式-panel1不采用样式

好的，所以我终于设法完成了大部分工作。
我有一个脚本，可在单击/打开时更改面板标题的颜色。
但是，我在使用4个以上面板的手风琴时遇到了问题。

要重现此问题：打开另一个面板，您将看到panel1仍使用灰色面板标题背景。单击另一个面板，您将注意到panel1现在使用正确的样式。
为什么我不能在第一次关闭时让panel1变回白色？
提前致谢。



var selectIds = $('#panel1,#panel2,#panel3,#panel4,#panel5,#panel6,#panel7,#panel8');
$(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    });
    $(".panel-heading").find("a[data-toggle=collapse]").on('click', function () {
        if ($(this).hasClass('collapsed')) {
            $(this).closest('.panel-group').find('.panel-default').removeClass('open');
            $(this).closest('.panel-default').addClass('open');
        } else {
            $(this).closest('.panel-default').removeClass('open');
        }
    });
});

.panel-default.open {
		background-color: #616161;
		transition: all 1s;
		}
		.custom-panel .panel-default.open >.panel-heading {
		background: transparent;
          color:#fff;
		}
       .custom-panel .panel-default>.panel-heading {
         background: #fff;
       }

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
		<div class="panel-group custom-panel" id="accordion">
                <div class="panel panel-default open">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
                                <i class="fa fa-minus text-primary"></i> CONTENT
                            </a>
                        </h4>
                    </div>
                    <div id="panel1" class="panel-collapse collapse in">
                        <div class="panel-body panel-body-help">
             CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel2" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
            CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel3" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
                       CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel4" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
                CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel5" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
                 CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel6" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
        CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel7" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
            CONTENT
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> CONTENT</a>
                        </h4>
                    </div>
                    <div id="panel8" class="panel-collapse collapse">
                        <div class="panel-body panel-body-help">
                CONTENT
                        </div>
                    </div>
                </div>
            </div>
		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

最佳答案

您只需要在HTML中的open中将类panel-default添加到第一个标头。
它将在页面加载时显示正确的类。



var selectIds = $('#panel1,#panel2,#panel3,#panel4,#panel5,#panel6,#panel7,#panel8');
$(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    });
    $(".panel-heading").find("a[data-toggle=collapse]").on('click', function () {
        if ($(this).hasClass('collapsed')) {
            $(this).closest('.panel-group').find('.panel-default').removeClass('open');
            $(this).closest('.panel-default').addClass('open');
        } else {
            $(this).closest('.panel-default').removeClass('open');
        }
    });
});

.panel-default.open {
		background-color: red;
		transition: all 1s;
		}
		.custom-panel .panel-default.open >.panel-heading {
		background: transparent;
		}
       .custom-panel .panel-default>.panel-heading {
         background: #fff;
       }

<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
		<div class="panel-group custom-panel" id="accordion">
			<div class="panel panel-default open">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
					</h4>
				</div>
				<div id="panel1" class="panel-collapse collapse in">
					<div class="panel-body">Contents panel 1</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
					</h4>
				</div>
				<div id="panel2" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 2</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
					</h4>
				</div>
				<div id="panel3" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 3</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus"></i>Panel 4</a>
					</h4>
				</div>
				<div id="panel4" class="panel-collapse collapse">
					<div class="panel-body">Contents panel 4</div>
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

09-11 20:35
Powered by LMLPHP ©2025 panel1 0.032972