0

以下は、ページで div ブロックを表示/非表示にするために使用している完全なコードです。現在、特定のテキスト見出しをクリックすると、その見出しのブロック コンテンツが表示されます。次に、別のテキスト見出しをクリックすると、その見出しの別のブロック コンテンツが表示されますが、以前に開いたブロックは閉じません。別の見出しをクリックするたびに、開いているブロックを閉じたい。私を助けてください。

function viewdetail(divno)
{       
    if(document.getElementById("div_com"+ divno).style.display=="block")
    {
        document.getElementById("div_com"+ divno).style.display="none";
        document.getElementById("a_title"+ divno).title="Click to view details";
    }
    else
    {
        document.getElementById("div_com"+ divno).style.display="block";
        document.getElementById("a_title"+ divno).title="Click to hide details";
    }   
    return true;
}


<table>
<?php 
$int_cnt=1;
while(!$rs_list->eof())
{
?>
    <tr> 
        <td>
        <a name="a<?php print($int_cnt)?>"></a>
            <table>
                <tr>
                    <td><a href="#a<?php print($int_cnt)?>" id="a_title<?php print($int_cnt)?>" onClick="return viewdetail(<?php print($int_cnt)?>);"><?php print($rs_list->fields("title"));?></a></td>
                </tr>
                <tr>
                    <td>
                        <div align="justify" id="div_com<?php print($int_cnt)?>" style="display:none"><table><tr><td>Text will display here</td></tr></table></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
<?php 
$rs_list->movenext();
$int_cnt=$int_cnt+1;        
}       
?>
</table>
4

3 に答える 3

-2

注： jqueryを使用して、divにクラス属性を与えます。これは、すべてのdivで同じであり、cssを使用してそれらを非表示にします。
HTML(例): 

<table>
    <tr>
        <td><a href="#" class="myLink" id="1">this is 1</a>
        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom1" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 1</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td><a href="#" class="myLink" id="2">this is 2</a>

        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom2" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 2</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td><a href="#" class="myLink" id="3">this is 3</a>

        </td>
    </tr>
    <tr>
        <td>
            <div align="justify" id="div_dom3" class="myClass">
                <table>
                    <tr>
                        <td>Text will display here for 3</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

CSS: 

.myClass{
    display:none
}

JS: 

$(document).ready(function () {
    $(".myLink").on('click',function(){
        $(".myClass").hide();
        var divno =  $(this).attr('id');
        $("#div_dom" + divno).show();
    });
});

JSFIDDLE デモ

于 2013-08-03T07:11:24.157 に答える