使用幻灯片

Question

这是我的小提琴

https://jsfiddle.net/4nnfzz5a/6/

当您在3上单击是时，4向下移动然后再回来。看起来有一些CSS被添加到#q2

Answer 1

无需添加多个事件处理程序，您可以使用单个处理程序执行此操作。使用prev()＆amp; next()显示/隐藏面板。

$(".panel-body input[type='radio']").change(function() {

  if ($(this).val() == 'yes') {
    $(this).parents('.panel').hide();
    $(this).parents('.panel').next().show("slide", {
      direction: "right"
    }, 500);
  } else {
    $('#alert').show("slide", {
      direction: "up"
    }, 500);
  }
});

$(".panel-heading .back").click(function() {
  $(this).parents('.panel').hide();
  $(this).parents('.panel').prev().show("slide", {
    direction: "right"
  }, 500);
});

#q1 {
  text-align: center;
}

#q2 {
  text-align: center;
}

#q3 {
  text-align: center;
}

#q4 {
  text-align: center;
}

#q5 {
  text-align: center;
}

.unsure {
  font-size: 20px;
}

.unsure a {
  color: #1e5973;
  text-decoration: underline;
}

#texta {
  margin-top: 25px;
  text-align: left;
}

#q5cdq {
  font-size: 18px;
}

.back {
  font-size: 13px;
  margin-bottom: 0px;
  float: left;
  cursor: pointer;
  margin-right: 15px;
}

.q5cdqa {
  text-align: left;
}

.center {
  text-align: center;
}

#q5faq {
  font-size: 18px;
}

#q5faq a {
  color: #1e5973;
  text-decoration: underline;
}

#q5n a {
  color: #1e5973;
  text-decoration: underline;
}

#q5wct a {
  color: #1e5973;
  text-decoration: underline;
}

#q5ilt a {
  color: #1e5973;
  text-decoration: underline;
}

div#q5wct {
  font-size: 18px;
}

div#q5ilt {
  font-size: 18px;
}

p.cdq img {
  width: 30px;
  height: 30px;
}

p.no img {
  width: 30px;
  height: 30px;
}

p.faq img {
  width: 30px;
  height: 30px;
}

p.wct img {
  width: 30px;
  height: 30px;
}

p.ilt img {
  width: 30px;
  height: 30px;
}

p.no {
  font-size: 30px;
}

p.faq {
  font-size: 30px;
}

p.cdq {
  font-size: 30px;
}

p.cdq:hover {
  color: #1e5973;
  cursor: pointer;
}

p.no:hover {
  color: #1e5973;
  cursor: pointer;
}

p.faq:hover {
  color: #1e5973;
  cursor: pointer;
}

p.wct:hover {
  color: #1e5973;
  cursor: pointer;
}

p.ilt:hover {
  color: #1e5973;
  cursor: pointer;
}

#checkbox {
  margin-top: 25px;
}

label {
  padding-right: 50px;
  padding-left: 50px;
}

label>input {
  /* HIDE RADIO */
  visibility: hidden;
  /* Makes input not-clickable */
  position: absolute;
  /* Remove input from document flow */
}

label>input+img {
  /* IMAGE STYLES */
  cursor: pointer;
  border: 2px solid transparent;
}

label>input:checked+img {
  /* (RADIO CHECKED) IMAGE STYLES */
  border: 2px solid #f00;
}

.lightbox_title {
  font-family: Roboto;
  font-weight: 700;
  color: #1e5973;
  vertical-align: middle;
  padding-left: 20px;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default {
  border-color: #ddd;
}

.panel-default>.panel-heading {
  color: #64656a;
  background-color: #c2cdd2;
  border-color: #ddd;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-bottom-color: transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
  font-family: Roboto;
  font-weight: 700;
  font-size: 24px;
}

.panel-body {
  background-color: #42afdf;
  margin: auto;
  margin-top: auto;
}

.questions {
  font-family: Nunito;
  color: #fff;
  font-size: 20px;
  padding: 15px;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 4px;
}

.none {
  display: none;
}

#logo {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<!-- Start Red Alert-->
<div id="alert" class="alert alert-danger exit" role="alert" style="display:none;">
  <span>NIH does <b>not</b> consider your study to be a clinical trial.<span><br /><br />Make sure you select a funding opportunity announcement (FOA) that is NOT specifically for clinical trials.
	</div>
<!-- End Red Alert-->	



<!-- Start Question 1-->	
	<div id="q1" class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">1</h3>
  </div>
  <div class="panel-body">
  	<div class="questions">
    <p class="unsure">1</p>
    <div id="checkbox">
        <label>
        <input type="radio" name="q1" value="yes" />YES
        </label>
        <label>
        <input type="radio" name="q1" value="no"/>NO
        </label>
        </div>
  </div>
</div>
</div>
<!-- End Question 1-->

<!--Question 2-->
<div id="q2" class="panel panel-default" style="display:none;">
  <div class="panel-heading">
    <h3 class="panel-title"><span class="back">< Back </span> 2</h3>
</div>
<div class="panel-body">
  <div class="questions">
    <p class="unsure">2</p>
    <div id="checkbox">
      <label>
        <input type="radio" name="q2" value="yes" />YES
        </label>
      <label>
        <input type="radio" name="q2" value="no"/>NO
        </label>
    </div>
  </div>
</div>
</div>
<!--End Question 2-->



<!--Question 3-->
<div id="q3" class="panel panel-default" style="display:none;">
  <div class="panel-heading">
    <h3 class="panel-title"><span class="back">< Back </span> 3</h3>
  </div>
  <div class="panel-body">
    <div class="questions">
      <p class="unsure">3</p>
      <div id="checkbox">
        <label>
        <input type="radio" name="q3" value="yes" />YES
        </label>
        <label>
        <input type="radio" name="q3" value="no"/>NO
        </label>
      </div>
    </div>
  </div>
</div>
<!--End Question 3-->


<!--Question 4-->
<div id="q4" class="panel panel-default" style="display:none;">
  <div class="panel-heading">
    <h3 class="panel-title"><span class="back">< Back </span> 4</h3>
  </div>
  <div class="panel-body">
    <div class="questions">
      <p class="unsure">4</p>
      <div id="checkbox">
        <label>
        <input type="radio" name="q4" value="yes" />YES
        </label>
        <label>
        <input type="radio" name="q4" value="no"/>NO
        </label>
      </div>
    </div>
  </div>
</div>
<!--End Question 4-->


<!--Question 5-->
<div id="q5" class="panel panel-default" style="display:none;">
  <div class="panel-heading">
    <h3 class="panel-title"><span class="back">< Back </span> 5</h3>
  </div>
  <div class="panel-body">
    <div class="questions">
      <p class="unsure">5</p>
      <div id="checkbox">
        DONE DONE GO BACK
      </div>
    </div>
  </div>
</div>
<!--End Question 5-->