隱藏href鏈接，除非它們已被點擊

Question

我有這個簡單的隱藏/顯示輸入框代碼，但我想更改它，以便您不會一次看到所有鏈接，而只會看到已單擊的鏈接，顯示了最初被點擊的最後一個鏈接之後的一個鏈接。然後，如果點擊鏈接1和鏈接2，鏈接2被點擊，只顯示鏈接1,2和3等等，是否有適應此代碼的方法使之成爲可能？

<script type="text/javascript"> 

function show(id){ 
if(document.getElementById(id).style.display=="none") 
{ 
    document.getElementById(id).style.display="block" 
} 
else{ 
     document.getElementById(id).style.display="none" 
    } 
       } 

</script> 

<a href="#null" onclick="show('t1')">Link 1</a> <input type="text" id="t1"  
style="display:none"><BR> 
<a href="#null" onclick="show('t2')">Link 2</a> <input type="text" id="t2" 
style="display:none"><BR> 
<a href="#null" onclick="show('t3')">Link 3</a> <input type="text" id="t3" 
style="display:none"><BR> 
<a href="#null" onclick="show('t4')">Link 4</a> <input type="text" id="t4" 
style="display:none"><BR> 
<a href="#null" onclick="show('t5')">Link 5</a> <input type="text" id="t5"  
style="display:none"><BR> 

Answer 1

基於假設選項「一」從我的原帖評論，稍微改變一下代碼：

<script type="text/javascript"> 
function show(id){ 
    if(document.getElementById(id+"-link").style.display=="none") { 
    document.getElementById(id+"-link").style.display="block"; 
    document.getElementById(id+"-input").style.display="block"; 
    } 
} 
</script> 

<a href="#null" onclick="show('t2')">Link 1</a> <input type="text" id="t1"><BR> 
<a href="#null" style="display:none" id="t2-link" onclick="show('t3')">Link 2</a> <input type="text" id="t2-input" style="display:none"><BR> 
<a href="#null" style="display:none" id="t3-link" onclick="show('t4')">Link 3</a> <input type="text" id="t3-input" style="display:none"><BR> 

基本上抵消了ID在調用「秀」，這樣點擊每個鏈接顯示下一個鏈接，並且不隱藏第一個鏈接。注意't2'現在只是id的一部分，'show'函數必須將其展開以包含所有顯示/隱藏的元素

我還沒有打算包含單獨的切換來顯示/隱藏的輸入，我已經刪除了代碼，以隱藏鏈接，如果用戶再次點擊

Answer 2

我可能是錯的，但它看起來像你希望它擴大和崩潰，因爲點擊鏈接。

我在小提琴中有一個解決方案，您可以查看。隨着鏈接被點擊，它會展開並崩潰。而且，如果在最後一次展開前單擊鏈接，則會崩潰級聯。

http://jsfiddle.net/XxURd/14/

希望這有助於。

的Javascript如下

$('a.control').click(function(){ 
    var show = this.id; 
    if($('#wrapper > div.' + show).is(':hidden')) { 
     $('#wrapper > div.' + show).show(); 
     return false; 
    } 
    else { 
     if(show == 'fieldset1') { 
      $('#wrapper > div.fieldset5').hide(); 
      $('#wrapper > div.fieldset4').hide(); 
      $('#wrapper > div.fieldset3').hide(); 
      $('#wrapper > div.fieldset2').hide(); 
      $('#wrapper > div.fieldset1').hide(); 
      return false; 
     } 
     if(show == 'fieldset2') { 
      $('#wrapper > div.fieldset5').hide(); 
      $('#wrapper > div.fieldset4').hide(); 
      $('#wrapper > div.fieldset3').hide(); 
      $('#wrapper > div.fieldset2').hide(); 
      return false; 
     } 
     if(show == 'fieldset3') { 
      $('#wrapper > div.fieldset5').hide(); 
      $('#wrapper > div.fieldset4').hide(); 
      $('#wrapper > div.fieldset3').hide(); 
      return false; 
     } 
     if(show == 'fieldset4') { 
      $('#wrapper > div.fieldset5').hide(); 
      $('#wrapper > div.fieldset4').hide(); 
      return false; 
     } 
     if(show == 'fieldset5') { 
      $('#wrapper > div.fieldset5').hide(); 
      return false; 
     } 
    } 
});​ 

CSS如下

#wrapper { 
    left: 0px; 
    width: 300px; 
    margin: 0 auto; 
} 

#wrapper > div { 
    display: none; 
    width: 300px; 
    height: 55px; 
    float: left; 
}​ 

HTML如下

<div id="wrapper"> 
    <a href="#" id="fieldset1" class="control">link 1</a><br/> 
    <div class="fieldset1" id="fs1"> 
     fieldset1: <input type="text" name="fld1"><br /> 
     &nbsp;<br /> 
     <a href="#" id="fieldset2" class="control">link 2</a><br/> 
    </div> 

    <div class="fieldset2" id="fs2"> 
     fieldset2: <input type="text" name="fld2"><br /> 
     &nbsp;<br /> 
     <a href="#" id="fieldset3" class="control">link 3</a><br/> 
    </div> 

    <div class="fieldset3" id="fs3"> 
     fieldset3: <input type="text" name="fld3"><br /> 
     &nbsp;<br /> 
     <a href="#" id="fieldset4" class="control">link 4</a><br/> 
    </div> 

    <div class="fieldset4" id="fs4"> 
     fieldset4: <input type="text" name="fld4"><br /> 
     &nbsp;<br /> 
     <a href="#" id="fieldset5" class="control">link 5</a><br/> 
    </div> 

    <div class="fieldset5" id="fs5"> 
     fieldset5: <input type="text" name="fld5"><br /> 
     &nbsp;<br /> 
    </div> 
</div>​ 

當你說 '只有被點擊的表演環節'