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>

基本上，在“show”调用中偏移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>

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

2 个答案: