页面加载时手风琴箭头错误

时间：2019-01-09 15:52:15

标签： javascript jquery html css twitter-bootstrap

我正在构建的手风琴内部装有光滑的滑块，但似乎无法使我的手风琴箭头在页面加载时正常工作。一切正常，但负载相反。

  

请将代码段展开为全屏模式，以查看错误。

页面加载：错误 enter image description here 展开时：正确 enter image description here 在手风琴关闭时：正确 enter image description here

这是我尝试使用CSS定位类的方式：

.panel-heading .right-hand-header-background:after {
    font-size: 18px;
    font-family: FontAwesome;
    content: "\f106";
    float: right;
    color: white;
}
.panel-heading.collapsed .right-hand-header-background:after {
    content: "\f107";
    font-size: 18px;
}

代码：

<style>
/* --- */
#bannerWrapper {
    display: none;
}
#sticky {
	z-index: 100;
	top: 0;
	position: sticky;
	position : -webkit-sticky;
}
.second {
	background: white;
	border-bottom: 1px solid #5E6A71;
}
.heading {
    background-color: #A2AD00;
    display: flex;
}
.container {
    /* box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15); */
    border: 1px solid #5E6A71;
}
.col-xs-3 {
    word-wrap: break-word;
    padding-right: 5px;
    padding-left: 10px;
    font-style: italic;
    color: #A2AD00;
    font-family: "Archer SSm A", "Archer SSm B"!important;
    font-weight: 600;
}
.col-xs-3 > span {
    font-size: 15px!important;
    font-family: "Archer SSm A", "Archer SSm B";
    font-weight: 800;
}

/* Heading */
.heading > .col-xs-9 {
	padding-left: 15px;
	padding-right: 15px;
	font-family: "Archer SSm A", "Archer SSm B"!important;
	font-size: small;
    border-left: 0px!important;
}
.heading > .col-xs-9 > h4 {
	font-size: x-large;
	color: white!important;
	font-family: "Whitney A", "Whitney B";
	margin-bottom: 2px;
}
.heading > .col-xs-3 {
	padding-right: 7px!important;
	padding-left: 7px!important;
	align-self: center;
}
/* ----- */

/* Change background color on even rows: Client Service and Counsel, 
Strategic and Creative Integrated Programming, etc.. */
.even-row {
	background-color: #F0F0F0;
}

/* Change background color on odd rows: Account Management and Operational Excellence, 
Recruitment and Retention, etc.. */
.odd-row {
	background-color: #F8F8F8;
}

/* Change background color of left-hand headings: Client, Talent, etc.. */
.left-hand-header-background {
	background-color: #EEAF00;
    font-family: "Whitney A", "Whitney B";
}
.left-hand-header-background > span {
    font-family: "Whitney A", "Whitney B"!important;
}

/* Change background color of right-hand headings: Client, Talent, etc.. */
.right-hand-header-background {
	background-color: #A2AD00;
}

.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #5E6A71;
}
.bg-white {
    background-color: white;
}

/* Sections */
.mainText {
    font-style: italic;
    color: #00C6D7;
}
#section {
    border-top: 1px solid #5E6A71;
    border-bottom: 1px solid #5E6A71;
}
#section1, #section2, #section3, #section4 {
    border-bottom: 1px solid #5E6A71;
}
/* ----- */

.title {
    color: #A2AD00;
    font-family: "Whitney A", "Whitney B";
    font-size: larger;
    margin-bottom: 0px;
}
.panel-heading {
	padding: 0px!important;
	border-left-width: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	cursor: pointer;
}
.panel-heading .right-hand-header-background:after {
    font-size: 18px;
    font-family: FontAwesome;
    content: "\f106";
    float: right;
    color: white;
}
.panel-heading.collapsed .right-hand-header-background:after {
    content: "\f107";
    font-size: 18px;
}

/* Slick Carousel */
.slick-next {
    right: 10px!important;
}
.slick-prev:before {
  color: #5E6A71!important;
}
.slick-next:before {
  color: #5E6A71!important;
}
.no-arrows > .slick-next,
.no-arrows > .slick-prev {
   display: none!important;
}
/* ----- */

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.row-11 {
    height: auto!important;
}
.container > ul {
    padding-left: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.img-responsive {
	display: inline-block;
}
/* ----- */
</style>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7088154/7564812/css/fonts.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>

<div class="container">
	<div class="accordion-group" id="accordion">
    <div class="row panel-heading" id="section3" data-toggle="collapse" data-parent="#section" data-target="#collapseThree" href="#collapseThree">
        <div class="col-xs-10 col-md-5 left-hand-header-background">
            <span class="text-uppercase font-weight-bold text-white">Business Development and Growth</span>
        </div>
        <div class="col-xs-2 col-md-7 right-hand-header-background">
        </div>
    </div>

	<div class="panel-collapse collapse s3" id="collapseThree">
     <div class="row odd-row">
        <div class="col-xs-3">
            <span>Organic Growth Efforts</span>
        </div>
        <div class="col-xs-9">
            <section class="regular slider no-arrows">
                <div class="col-xs-4">
                    <ul>
                        <li>Develops an understanding of client issues</li>
                        <li>Learns agency and OPRG/DAS/OMC capabilities and offerings that may be used to drive organic growth</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Listens for and responds to opportunities to grow current accounts</li>
                        <li>Helps introduce clients to new ideas and agency capabilities</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Identifies and introduces new ideas, capabilities and opportunities to grow existing accounts</li>
                        <li>Builds professional networks within client organizations</li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    </div>

    <div class="row panel-heading" id="section4" data-toggle="collapse" data-parent="#section" data-target="#collapseFour" href="#collapseFour">
        <div class="col-xs-10 col-md-5 left-hand-header-background">
            <span class="text-uppercase font-weight-bold text-white">Finance and Operations</span>
        </div>
        <div class="col-xs-2 col-md-7 right-hand-header-background">
        </div>
    </div>
    
    <div class="panel-collapse collapse s4" id="collapseFour">
       <div class="row odd-row">
        <div class="col-xs-3">
            <span>Staffing and Resource Planning</span>
        </div>
        <div class="col-xs-9">
            <section class="regular slider no-arrows">
                <div class="col-xs-4">
                    <ul>
                    	<li>Meets personal billable standards</li>
                        <li>Ensures all time is entered accurately and submitted by the end of each day</li>
                        <li>Acts judiciously with client and agency budgets</li>
                        <li>Adheres to financial practices and policies</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Understands how to effectively and profitably staff accounts</li>
                        <li>Knows how to forecast staffing needs and communciates expectations effectively</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Anticipates staffing needs</li>
                        <li>Effectively deals with account/business fluctuations to staff effectively and profitably</li>
                        <li>Effectively harnesses resources across the agency/DAS/OPRG</li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.com/libraries/jquery.SPServices"></script> -->

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        /* mobileFirst:true, */
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.slider',
        responsive: [{
            breakpoint: 700,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                }
            }]
        });
        $('#section1').on('click', function(e) {
    		$(".slick-slider").slick("refresh");
    		$('#collapseTwo').collapse('hide');
    		$('#collapseThree').collapse('hide');
			$('#collapseFour').collapse('hide');
		});
		$('#section2').on('click', function(e) {
    		$(".slick-slider").slick("refresh");
    		$('#collapseOne').collapse('hide');
    		$('#collapseTwo').collapse('hide');
			$('#collapseThree').collapse('hide');
		});
		$('#section3').on('click', function(e) {
    		$(".slick-slider").slick("refresh");
    		$('#collapseOne').collapse('hide');
    		$('#collapseTwo').collapse('hide');
			$('#collapseFour').collapse('hide');
		});
        $('#section4').on('click', function(e) {
    		$(".slick-slider").slick("refresh");
    		$('#collapseOne').collapse('hide');
    		$('#collapseTwo').collapse('hide');
			$('#collapseThree').collapse('hide');
		});
    });
</script>
</body>

</html>

0 个答案:

没有答案
相关问题
最新问题