所以我正在制作互动时间表。我不确定我是否有脑筋或什么，但我不明白为什么这不起作用，我没有在控制台中收到错误。
理想情况下，当我点击它时，我会让盒子在高处扩展。 这是css
.arrow-left{
background: url('img/arrow-left.svg');
float: left;
width: 270px;
height: 50px;
display: flex;
justify-content: center;
flex-direction: column;
}
.arrow-right{
background: url('img/arrow-right.svg');
float: right;
width: 270px;
height: 50px;
display: flex;
justify-content: center;
flex-direction: column;
}
.text-right{
margin-top: 20px;
margin-bottom: 40px;
float: right;
text-align: left;
width: 270px;
}
.text-left{
margin-top: 20px;
margin-bottom: 40px;
padding-left: 10px;
float: left;
text-align: left;
width: 270px;
}
.timeline{
width: 100%;
text-align: center;
letter-spacing: .1em !important;
}
.left-col{
padding-top: 182px;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #640722;
color: #fff;
height: 45px;
overflow: hidden;
text-align: left;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #640722 transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #640722;
}
.timeline ul li::after {
background: #fff;
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: #27e9f5;
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px,0,0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px,0,0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
.height{
height: auto !important;
}
.tl-tx{ margin-top: 20px; }
这是HTML
<section class="timeline">
<ul>
<li id="define">
<div class="one">
<h2 class="timeline">DEFINE GOALS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Reviewing and prioritizing your <b>short- and long-term goals</b>, objectives, and tolerance for risk</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REVIEW FINANCES <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REVIEW INVESTMENTS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx"> In-depth detailed review of your <b>current investment portfolio</b> and asset management strategy development</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DEVELOP STRATEGY <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing a summary of your current financial situation, including a net worth statement, cash flow/budget summary, and analysis of each element of financial planning as it currently relates to your specific financial situation</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">PLAN FOR RETIREMENT <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Completing a <b>retirement planning assessment</b>, including financial projections of assets required at estimated retirement date, desired incomerequirements and source coordination as well as using various quantitative measuring techniques, such as back testing, bear market testing and Monte Carlo analysis</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">ASSESS YOUR ESTATE <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Assessing <b>estate net worth and liquidity</b></p>
</div>
</li>
<li>
<div>
<h2 class="timeline">PLAN FOR TAXES <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Identifying <b>tax planning strategies</b> to optimize financial position</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DELIVER COMPREHENSIVE PLAN <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Presenting a <b>written financial plan</b> that will be reviewed in detail with you. It will contain recommendations designed to meet your stated goals and objectives, supported by relevant financial summaries</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">DEVELOP ACTION PLAN <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Developing an <b>action plan</b> to implement the agreed upon recommendations</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">MAKE REFERRALS <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx"><b>Referral to other</b> professionals, as required, to assist with implementation of the action plan</p>
</div>
</li>
<li>
<div>
<h2 class="timeline">ASSIST WITH IMPLEMENTATION <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Assisting you with the <b>implementation of the financial plan</b></p>
</div>
</li>
<li>
<div>
<h2 class="timeline">REGULARLY MONITOR <span class="glyphicon glyphicon-chevron-down" data-unicode="e114"></span></h2>
<p class="tl-tx">Determining steps required to ensure your financial plan is <b>monitored and, if necessary, revised or adjusted</b></p>
</div>
</li>
<!-- more list items here -->
和有问题的jquery
<script>
(function($) {
$('#define').click(function(){
$('.one').toggleClass('height');
})
});
</script>
吼叫是小提琴的一个链接。也许我只需要额外的一双眼睛。 https://jsfiddle.net/SCATORY/jwq0uLwd/