0

この単純な非表示/表示入力ボックス コードがありますが、一度にすべてのリンクを表示するのではなく、クリックされたリンクと、最後にクリックされたリンクの後の 1 つのリンクだけが表示されるように変更したいので、最初はリンク 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>
4

2 に答える 2

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」関数は、表示/非表示にするすべての要素を含めるように展開する必要があります。

入力を表示/非表示にする別のトグルを含めることを気にしませんでした。ユーザーがもう一度クリックした場合にリンクを非表示にするコードを削除しました

于 2013-01-02T23:21:09.190 に答える
0

私は間違っているかもしれませんが、リンクがクリックされると展開したり折りたたんだりしたいようです。

私はあなたが見るフィドルに解決策を持っています。リンクをクリックすると、展開したり折りたたんだりします。また、最後のリンクが展開される前にリンクをクリックすると、折りたたみがカスケードします。

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>​
于 2013-01-03T01:34:01.757 に答える