div内放置手风琴箭头

时间：2019-01-08 19:31:14

标签： javascript jquery html css twitter-bootstrap

我想为我的手风琴制作箭头，以便它们可以向右浮动，但是在使它成功方面存在一些问题。

这是我用来对齐和定义箭头的小片段，但它们似乎无法正常工作。我会很感激在此方面的所有投入，因为我已经弄乱了一段时间，无法弄清楚。

正在应用代码：

.panel-heading:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}
.panel-heading:after {
    content: "\e080";
}

图片供参考： enter image description here

我要如何做到： enter image description here

这是我目前拥有的： 

<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>

2 个答案:

答案 0 :(得分：1)

尝试一下：用以下规则替换这些规则：

    export default {
  data: function () {
    return {
      name: '',
      email: {
        value: '',
        valid: true
      },
      features: ['Payment Gateway', 'Magento External Checkout', 'Logima Cloud Hosting', 'Google tracking', 'CSM extension', 'Other (Please specify in message)'],
      selection: {
        member: '0',
        framework: 'vue',
        features: []
      },
      message: {
        text: ``,
        maxlength: 1000
      },
      submitted: false
    }
  },
  methods: {
    // submit form handler
    submit: function () {
      this.submitted = true
    },
    // validate by type and value
    validate: function (type, value) {
      if (type === 'email') {
      }
    },
    // check for valid email adress
    isEmail: function (value) {
    },
    // check or uncheck all
    checkAll: function (event) {
      this.selection.features = event.target.checked ? this.features : []
    }
  },
  watch: {
    // watching nested property
    'email.value': function (value) {
      this.validate('email', value)
    }
  }
}

此外，删除右侧标题中的.right-hand-header-background:after { /* symbol for "opening" panels */ font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */ font-size: 18px; /* match the font size in the left column*/ content: "\e114"; /* adjust as needed, taken from bootstrap.css */ float: right; /* adjust as needed */ color: grey; /* adjust as needed */ } .right-hand-header-background:after { /* symbol for "collapsed" panels */ content: "\e080"; /* adjust as needed, taken from bootstrap.css */ font-size: 18px; /* match the font size in the left column*/ }

：after选择器将字形添加到元素的内容之后，而不是元素本身之后。这包括跨度和换行符，这给了它奇怪的位置。最好。

编辑回复：

因此，要使这些箭头发生变化，我们需要为折叠状态和展开状态制定新的样式规则，并添加额外的JavaScript使其具有该行为。

检出此pastebin（SO代码小工具对我而言不起作用） pastebin

当您掌握了这一点后，您可能需要考虑为每个jQuery选择器分配一个变量，如下所示：

<br />

这省去了浏览器每次都要查找的麻烦，并使您的代码更易于使用。

答案 1 :(得分：0)

我不确定完全我完全了解您想要什么，但是尝试添加“ position：relative;”。转到.panel-heading，而不是在：after中使用“ float：right”，请尝试“ position：absolute; right：0;” ...一直在正确的位置和顶部定位，直到到达所需位置

相关问题
最新问题