javascript - 隐藏 href 链接，除非它们已被点击

Question

我有这个简单的隐藏/显示输入框代码，但我想更改它，以便您不会一次看到所有链接，而是只看到已单击的链接和最后一个链接之后的一个链接被单击所以一开始只显示链接 1。然后，如果单击它，则仅显示链接 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

根据我对原始帖子的评论中假设选项“a”，将代码稍微更改为：

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