逐步顯示每個div

Question

我想讓這個腳本一步一步地顯示我的div。當前的代碼只會顯示點擊的所有div。我如何讓它檢測div並顯示一步一步.Ex：第一次點擊=>展開第一步第二步，第二步clikc =>展開第二步的div。之後，如果div全部展開，點擊按鈕後隱藏所有div。

TQ

<div id="stepshow"> 
    <h3>Step 1</h3> 
</div> 
<div id="stepshow"> 
    <h3>Step 2</h3> 
</div> 

<button id="stepbtn"></button> 

<script> 
    var qqcounter = 1; 
    var maxstep = 3; 
    $("#stepbtn").text("Show step " + qqcounter); 
    $("#stepshow").hide(); 

    $("#stepbtn").click(function(){ 
    qqcounter++; 
    if(qqcounter < maxstep) 
    { 
     $("#stepbtn").text("Show step " + qqcounter); 
     $("#stepshow").slideDown(); 
    } 
    else 
    { 
     $("#stepbtn").text("Hide step"); 
    } 
    }); 
</script> 

Answer 1

這是行不通的，因爲你有相同的ID爲 「stepshow」 你應該改變它像 「stepshow_1」 例如水木清華：

$('btn').click(function(){ 

    $('#stepshow_'+counter).show(); 
    counter++; 

}); 

這裏是小提琴http://jsfiddle.net/uD3W2/2/

Answer 2

HTML

<div id="stepshow1" class="stepshow"> 
      <h3>Step 1</h3> 
     </div> 
    <div id="stepshow2" class="stepshow"> 
      <h3>Step 2</h3> 
     </div> 
    <div id="stepshow3" class="stepshow"> 
      <h3>Step 3</h3> 
     </div> 

     <input type="button" id="stepbtn" /> 

腳本

var qqcounter = 0; 
var maxstep = 4; 
$("#stepbtn").text("Show step " + qqcounter); 
$(".stepshow").hide(); 
$("#stepbtn").attr('value', 'Show step' + (qqcounter+1)); 
$("#stepbtn").click(function() { 
    console.log(qqcounter); 
    qqcounter++; 
    if (qqcounter < maxstep) { 
     $("#stepbtn").attr('value', 'Show step' + (qqcounter + 1)); 
     $('#stepshow' + qqcounter).slideDown(); 
    } 
    else { 
     $("#stepbtn").attr('value', 'Hide step'); 
     $(".stepshow").hide(); 
     qqcounter = 0; 
    } 
}); 

Answer 3

下面是如何顯示/隱藏一個例子：

http://jsfiddle.net/rVwkn/14/

的jQuery：

$('#stepbtn').click(function() { 
    if ($('#step2').is(':visible')) { 
     $('#step3').show(); 
     $('#stepbtn').hide(); 
    } else if ($('#step1').is(':visible')) { 
     $('#step2').show(); 
    } 
}); 

$('#backbtn').click(function() { 
    if ($('#step3').is(':visible')) { 
     $('#step3').hide(); 
     $('#stepbtn').show(); 
    } else if ($('#step1').is(':visible')) { 
     $('#step1').hide(); 
    } 
}); 

CSS：

#step2 { 
     display:none; 
    } 
    #step3 { 
     display:none; 
    } 
    #backbtn { display: none }  

HTML：

<div id="step1"> 
     <h3>Step 1</h3> 
    </div> 
    <div id="step2"> 
     <h3>Step 2</h3> 
    </div> 
    <div id="step3"> 
     <h3>Step 3</h3> 
    </div> 

    <button id="stepbtn">Next Step</button> 
    <button id="backbtn">Go Back a Step</button> 

UPDATE：

這裏是另一個版本，以及，它給你更多的靈活性：

http://jsfiddle.net/ddr6D/6/

的jQuery：

  $(document).ready(function() { 
       var current_step = 1; 
       var max_number_of_steps = 6; 
       $('#stepbtn').click(function() { 
        var next_step = current_step + 1; 
        $('#step'+next_step).slideDown(); 
        $('#backbtn').show(); 
        current_step++; // increase the step we are on... 
        if (current_step == max_number_of_steps) { 
        $('#stepbtn').hide(); 
        } 
       }); 

       $('#backbtn').click(function() { 
        $('#step'+current_step).slideUp();// hide it first, 
        current_step--; // now update, so we know the correct step we are on 
        if (current_step == 1) { 
        $('#backbtn').hide(); 
        } 
        if (current_step < max_number_of_steps) { 
         $('#stepbtn').show(); // show, if its been hidden... 
        } 
       }); 

      }); 

CSS：

  #step2,#step3,#step4,#step5,#step6 { 
       display:none; 
      } 
      #backbtn { display: none } 

HTML：

  <div id="step1"> 
       <h3>Step 1</h3> 
      </div> 
      <div id="step2"> 
       <h3>Step 2</h3> 
      </div> 
      <div id="step3"> 
       <h3>Step 3</h3> 
      </div> 
      <div id="step4"> 
       <h3>Step 4</h3> 
      </div> 
      <div id="step5"> 
       <h3>Step 5</h3> 
      </div> 
      <div id="step6"> 
       <h3>Step 6</h3> 
      </div> 

      <button id="stepbtn">Next Step</button> 
      <button id="backbtn">Go Back a Step</button>