我想为我的 Accordion 制作箭头，以便它们可以向右浮动，但我在制作它时遇到了一些问题。
这是我用来对齐和定义箭头的小片段，但它们似乎无法正常工作。我将不胜感激所有关于此的输入，因为我已经弄乱了格式一段时间并且无法弄清楚。
正在应用的代码:
.panel-heading:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
}
.panel-heading:after {
content: "\e080";
}
引用图片:
我想怎么做:
这是我目前拥有的:
<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" />
<style>
/* --- */
@media (max-width: 1023px) {
.row .row {
margin-left: -1.0rem;
margin-right: -1.0rem;
}
}
@media (min-width: 992px) {
.col-md-7 {
width: 58.334%;
}
}
@media (max-width: 411px) {
p {
font-size: smaller;
}
.heading > .col-xs-9 > h4 {
font-size: small!important;
}
.col-xs-2 {
display: none;
}
.col-xs-10 {
width: 100%;
}
.col-xs-4 > span {
font-size: smaller!important;
}
.col-xs-3 > span {
font-size: inherit;
}
}
#bannerWrapper {
display: none;
}
#sticky {
z-index: 100;
top: 0;
position: sticky;
position : -webkit-sticky;
}
.second {
background: white;
border-bottom: 1px solid #5E6A71;
}
#pageTitle {
display: none;
}
#columnMiddle {
padding-top: 50px;
}
.heading {
background-color: #A2AD00;
display: flex;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
.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;
}
/* Change the padding on rows.*/
.container > .col-xs-3, .col-xs-4 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.container > .col-md-5, .col-md-7 {
padding-top: .2rem!important;
padding-bottom: .2rem!important;
font-family: "Whitney A", "Whitney B";
font-size: large;
}
.col-xs-10, .col-xs-2 {
padding-top: .2rem!important;
padding-bottom: .2rem!important;
font-family: "Whitney A", "Whitney B";
font-size: medium;
}
.col-xs-10 > span {
font-size: 18px!important;
}
.col-xs-2 > span {
font-size: 18px!important;
}
/* ----- */
.even-row > .col-xs-3 {
padding-top: 10px;
}
.odd-row > .col-xs-3 {
padding-top: 10px;
}
.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;
}
/* Junior/Mid/Senior Sub-Headings */
.col-xs-4 > span {
font-family: "Archer SSm A", "Archer SSm B"!important;
font-weight: 600;
font-size: 16px;
color: #231f20;
}
.col-xs-4 > ul > li {
font-family: "Archer SSm A", "Archer SSm B";
font-size: 14px;
color: #231f20;
}
/* ----- */
.col-xs-9 {
padding-left: 0px;
padding-right: 0px;
border-left: 1px solid #5E6A71;
}
.col-xs-9 > p {
font-size: 13px!important;
font-family: "Archer SSm A", "Archer SSm B";
font-weight: 800;
}
#sub {
font-weight: normal;
font-size: smaller;
}
/* 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:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
/* 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>
</head>
<body>
<div class="container">
<div class="accordion-group" id="accordion">
<div class="row bb panel-heading" id="section1" data-toggle="collapse" data-parent="#section" data-target="#collapseOne" href="#collapseOne">
<div class="col-xs-10 col-md-5 left-hand-header-background">
<span class="text-uppercase font-weight-bold text-white">Client</span>
</div>
<div class="col-xs-2 col-md-7 right-hand-header-background">
<span><br/></span>
</div>
</div>
<div class="panel-collapse collapse s1" id="collapseOne">
<div class="row bb even-row">
<div class="col-xs-3">
<span>Client Service and Counsel</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Demonstrates good judgement and ability to solve problems</li>
<li>Demonstrates ability to clearly articulate concepts and ideas</li>
<li>Develops understanding of clients' business and goals</li>
<li>Beings to understand agency's solutions for clients and how they drive business results</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Develops annual or campaign-based plans for client needs</li>
<li>Proactively provides recommendations to maximize results and minimize challenges</li>
<li>Demonstrates strong presentation skills, ability to articulate and sell ideas effectively to clients and colleagues</li>
<li>Understands clients' business needs and contributes to building strong client relationships</li>
<li>Develops programs and solutions that effectively meet business needs and priorities</li>
<li>Demontrates a good understanding of the client's industry, competitors and trends</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Serves as primary point of contact for high level issues, concerns and requests</li>
<li>Leads and manages client programs within budget parameters</li>
<li>Leads presentations, ability to persuade and sell concepts, ideas, and stories in both large gatherings and one on one</li>
<li>Anticipates clients' business and communications needs</li>
<li>Is responsive, results-oriented and growth-focused</li>
<li>Counsels clients on capabilities, products and services that will deliver greatest value to their business</li>
<li>Is able to have tough client conversations</li>
<li>Inspires clients' confidence in agency and account team</li>
</ul>
</div>
</section>
</div>
</div>
<div class="row bb odd-row">
<div class="col-xs-3">
<span>Account Management and Operational Excellence</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Produces documents or assets for clients with guidance</li>
<li>Activitely contibutes to teams</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Ensures teams are meeting client deadlines and objectives</li>
<li>Leads planning meetings and brainstorms to support client needs and requests</li>
<li>Collaborates effectively with colleagues and clients</li>
<li>Relies on lessons learned to lead successful program execution</li>
<li>Keeps account leadership informed of client successes and challenges</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Develops and drives integrated strategies, including clear objectives and metrics</li>
<li>Leads globally and uses all resources to deliver seamless integrated solutions</li>
<li>Ensures successful execution of programs and leads post-program analysis to drive continued learning and improvement</li>
</ul>
</div>
</section>
</div>
</div>
<div class="row even-row">
<div class="col-xs-3">
<span>Strategic and Creative Integrated Programming</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Contributes to project or campaign plans</li>
<li>Proactively contributes ideas</li>
<li>Participates in brainstorms and/or other creative processes</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Brings new ideas to the team</li>
<li>Inspires colleagues to use creative sources and resources</li>
<li>Is able to communicate the business values of recommended solutions</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Regularly brings clients new ideas and creative solutions</li>
<li>Anticipates how potential ideas and solutions may play out when executed</li>
<li>Drives business growth through new tools, products and ideas</li>
</ul>
</div>
</section>
</div>
</div>
</div>
<div class="row panel-heading" id="section2" data-toggle="collapse" data-parent="#section" data-target="#collapseTwo" href="#collapseTwo">
<div class="col-xs-10 col-md-5 left-hand-header-background">
<span class="text-uppercase font-weight-bold text-white">Talent</span>
</div>
<div class="col-xs-2 col-md-7 right-hand-header-background">
<span><br/></span>
</div>
</div>
<div class="panel-collapse collapse s2" id="collapseTwo">
<div class="row bb odd-row">
<div class="col-xs-3">
<span>Recruitment and Retention</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Recommends the agency to prospective employees</li>
<li>Identifies talented candidates and communicates them to hiring teams</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Assists with recruitment, staffing and performance management</li>
<li>Is committed to diverse and inclusive hiring, teams and perspective</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Participates in hiring process, including recruiting, interviews and selection</li>
<li>Guides, builds and manages teams for practice areas</li>
<li>Ensures we have the right people in place to drive our growth</li>
<li>Attracts, grows and retains talent</li>
<li>Demonstrates commitment to diverse and inclusive hiring, teams and perspective</li>
<li>Is adept at providing effective performance feedback and coaching</li>
</ul>
</div>
</section>
</div>
</div>
<div class="row bb even-row">
<div class="col-xs-3">
<span>Professional Development</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Keeps supervisor and account teams informed of work status and product</li>
<li>Demonstrates positive, team-focused attitude</li>
<li>Builds relationships with colleagues within and across teams, practices, offices</li>
<li>Seeks and embraces feedback</li>
<li>Collaborates well</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Contributes to professional development of team members and colleagues</li>
<li>Supervises team members and oversee their work on client accounts</li>
<li>Serves as a role model to junior staff</li>
<li>Mentors direct reports</li>
<li>Is able to provide effective feedback to team leaders, colleagues and direct reports</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Recommends promotion nominations and provides input on compensation, recognition and professional development</li>
<li>Ensures performance evaluations are completed on time</li>
<li>Influences and inspires others to do their best work</li>
<li>Effectively guides, coaches and develops colleagues at all levels</li>
<li>Fosters team collaboration</li>
</ul>
</div>
</section>
</div>
</div>
<div class="row odd-row">
<div class="col-xs-3">
<span>Leadership Presence</span>
</div>
<div class="col-xs-9">
<section class="regular slider no-arrows">
<div class="col-xs-4">
<ul>
<li>Demonstrates passion for learning and openness to coaching</li>
<li>Seeks a wide range of assignments</li>
<li>Uses agency's learning and development tools</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Begins to build supervisory skills</li>
<li>Relates well with colleagues and clients at all levels</li>
<li>Demonstrates professionalism and confidence</li>
<li>Takes responsibility for own development and seeks opportunities to grow</li>
</ul>
</div>
<div class="col-xs-4">
<ul>
<li>Shows passion for the agency and commitment to achieving our strategic priorities</li>
<li>Demonstrates a global, inclusive and diverse perspective</li>
<li>Partners successfully with other colleagues, regions and agencies</li>
<li>Is seen as a role model and positive example of bringing the FH culture to life</li>
<li>Contributes to thought leadership</li>
</ul>
</div>
</section>
</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>最佳答案
我不是完全确定我完全理解您想要什么，但请尝试添加“position: relative;”到 .panel-heading，而不是在你的 :after 中使用“float: right”，试试“position: absolute; right: 0;” ...尝试使用正确的和顶部的定位，直到到达您想要的位置
关于javascript - Accordion 箭头定位在 div 内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54098517/