1
我試圖使點擊鏈接時使div類比原始大小更寬;所以最初的'通用陰影'類被設置爲33%,但是一旦我點擊'閱讀更多'我想它是100%?我不使用jQuery/JS也不錯,但希望我是接近在點擊展開div類的寬度
$(".toggle").click(function() {
$("generic-shadow").toggleClass("generic-shadow");
$("generic-shadow").toggleClass("generic-shadow-clicked");
// hides matched elements if shown, shows if hidden
$(this).next().toggle();
$(this).next().next().slideToggle("slow");
});
.generic-shadow {
height: 100%;
transition: .8s ease-in-out;
width: 33%;
}
.generic-shadow-clicked {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="generic-shadow lazy-loading">
<div class="interactive-pane">
<div class="pane-overlay"></div>
<div class="pane-content">
<div class="pane-title">Integrated Solutions Knowledge & Insight</div>
<div class="pane-content-inner">
<img src="images/health-assessments-small.png" alt="Product Logo">
<h2>Health Assessments</h2>
</div>
</div>
</div>
<a class="toggle" href="javascript:void(0);">Read More...</a>
<div id="content" class="pane">
<div class="pane-info">Health Assessments serve to determine the current health and wellbeing of your workforce.</div>
</div>
<div id="contentHidden" style="display:none;" class="pane">
<div class="pane-info">
<p>Health Assessments serve to determine the current health and wellbeing of your workforce.</p>
<p>Through knowledge and education about an individual’s health, your workers are able to make informed decisions that function to provide a catalyst for positive workplace culture.</p>
<p><em>Encouraging health, wellbeing and positive workplace culture</em>
</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Determine the health of your workforce</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Foster positive lifestyle changes within the workplace</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Educate and empower healthier lifestyle choices</p>
<p><i class="fa fa-check-square-o" aria-hidden="true"></i> Provide simple solutions for long-lasting results</p>
</div>
</div>
</li>
感謝的是,它沒有工作,雖然。我認爲這是因爲我有3塊(通用陰影)向左漂浮? –
我已更新答案並添加了其片段。有用。如果它有用,請接受並贊成 – jafarbtech