Question

我有3个div，每个div上有2个单选按钮是/否。最初我想只显示第一个div。在选择否时，我希望隐藏第一个div，然后滑入下一个div并为第3个div进行相同操作。你能帮我吗？

感谢。

Answer 1

看看这个小提琴是否对你有用https://jsfiddle.net/645vpnkk/

＆＃13;

var slideFunction = function(event) {
  var radio1 = event.data.radio1;
  var radio2 = event.data.radio2;
  if (event.target.value === "no") {
    radio1.slideToggle("1000", function() {
      radio2.slideToggle("1000", function() {
        radio2.removeClass('hide');
      });
    });
  }
}

$("input[name=radio1]:radio").on('click', {
  radio1: $("#radio1"),
  radio2: $("#radio2")
}, slideFunction);
$("input[name=radio2]:radio").on('click', {
  radio1: $("#radio2"),
  radio2: $("#radio3")
}, slideFunction);

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="radio1">
  <h3>Div 1</h3>
  <input type="radio" name="radio1" value="yes">Yes</input>
  <input type="radio" name="radio1" value="no">No</input>
</div>
<div id="radio2" class="hide">
  <h3>Div 2</h3>
  <input type="radio" name="radio2" value="yes">Yes</input>
  <input type="radio" name="radio2" value="no">No</input>
</div>
<div id="radio3" class="hide">
  <h3>Div 3</h3>
  <input type="radio" name="radio3" value="yes">Yes</input>
  <input type="radio" name="radio3" value="no">No</input>
</div>

＆＃13;

Answer 2

如果解决了您的问题，请使用以下代码： *********************** HTML *****************

<div class="sectionFirst">
</div>
<div class="sectionTwo">
</div>
<div class="sectionThree">
</div>
<input type="radio" name="radioSelect" id="sectionFirst" onclick="openDiv()">
<input type="radio" name="radioSelect" id="sectionTwo" onclick="openDiv()">
<input type="radio" name="radioSelect" id="sectionThree" onclick="openDiv()">

************ CSS ********************************** *************

.sectionFirst{
  background:red;
  height:100px;
  width:100%;
 }
 .sectionTwo{
  background:blue;
  height:100px;
  width:100%;
 }
 .sectionThree{
  background:green;
  height:100px;
  width:100%;
 }

********************* Jquery的********************

$(document).ready(function(){
$(".sectionTwo").hide();
$(".sectionThree").hide();
});
function openDiv(){
      var value =$('input[type=radio][name=radioSelect]:checked').attr('id');
      switch(value){
        case 'sectionFirst':
        $(".sectionTwo").hide();
                $(".sectionThree").hide();
        $(".sectionFirst").show();
        break;
        case 'sectionTwo':
        $(".sectionTwo").show();
                $(".sectionThree").hide();
        $(".sectionFirst").hide();
        break;
        case 'sectionThree':
        $(".sectionTwo").hide();
                $(".sectionThree").show();
        $(".sectionFirst").hide();
        break;
      }
}

您可以在https://jsfiddle.net/q9dn4pax/30/

查看正在运行的示例

单击单选按钮滑动div

2 个答案: