单击“展开Div类的宽度”

Question

我试图通过点击链接使div类比原始大小更宽;所以最初的＆＃39; generic-shadow＆＃39; class被设置为33％，但是一旦我点击了“更多”＆＃39;我喜欢它100％？我对jquery / js不太满意，但希望我能够关闭

＆＃13;

＆＃13;

$(".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");
});

＆＃13;

.generic-shadow {
  height: 100%;
  transition: .8s ease-in-out;
  width: 33%;
}
.generic-shadow-clicked {
  width: 100%;
}

＆＃13;

<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 &amp; 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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  $(".generic-shadow").removeClass("generic-shadow");
  $(".generic-shadow").addClass("generic-shadow-clicked");

Answer 2

删除此行

$("generic-shadow").toggleClass("generic-shadow");

删除上一行并将$("generic-shadow")更改为$(".generic-shadow")，因为该课程需要.前缀

$(".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");
});

<强>样本

$(".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 &amp; 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>