文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >打开并单击JS样式- panel1不接受样式

问打开并单击JS样式- panel1不接受样式
EN

Stack Overflow用户
提问于 2016-06-03 15:24:39
回答 1查看 66关注 0票数 0

好的，我终于成功地完成了大部分的工作。我有一个脚本，可以在单击/打开时更改面板标题的颜色。然而，我有一个问题，手风琴超过4个面板。

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

​

代码语言：javascript
复制
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');
        }
    });
});
代码语言：javascript
复制
.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;
       }
代码语言：javascript
复制
<!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>

​

css
twitter-bootstrap
visual-studio
javascript
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-03 15:33:35

您只需要将类open添加到第一个标题中，panel-default在您的html中。

它将在页面负载上显示正确的类。

​

代码语言：javascript
复制
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');
        }
    });
});
代码语言：javascript
复制
.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;
       }
代码语言：javascript
复制
<!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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37618169

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档