滑動單選按鈕單擊

Question

我有3個div，每個div有2個單選按鈕是/否。最初我只想顯示第一個div。在選擇否，我想第一個div被隱藏，下一個div滑入第三個div。你能幫我麼。

謝謝。

Answer 1

看是否有此琴是利用你https://jsfiddle.net/645vpnkk/

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);

.hide { 
 
    display: none; 
 
}

<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>

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/