Php 使用Javascript显示/隐藏DIV内容块

下面是我用来在页面上显示/隐藏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>

注意：使用jquery为您的div赋予class属性，这对于所有div都是一样的，并使用css将它们隐藏起来。 HTMLexample：

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

JS:

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

---

函数中的逻辑只处理最后单击的div。因此，需要 A、 照别人的建议去做，关闭所有 B、 将divno存储在一个变量中，这样您就可以知道其中一个之前已打开，现在应该关闭

---

C、 使用JQuery

您可能希望尝试使用类跟踪当前打开的div，然后使用该类查找以前打开的div并将其关闭

Javascript在现代浏览器中支持getElementByClassName，如和所示

因此，可以将函数重写为：

function viewdetail(divno)
{      
    if(document.getElementsByClassName("last-opened"))
    {
        document.getElementsByClassName("last-opened").style.display="none";
        document.getElementsByClassName("last-opened").title="Click to view details";

    }
    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";
        document.getElementById("a_title"+ divno).className = "last-opened";
        // Or this next line if you want to keep previous classes there.
        // document.getElementById("a_title"+ divno).className = document.getElementById("a_title"+ divno).className + "last-opened";
    }   
    return true;
}

---

我没有对它进行测试，但我认为这会起作用。

当显示单击的div时，需要隐藏所有其他div吗？每次只需将它们全部隐藏，然后显示具体的div，您应该使用jQuery，这对此类内容很有好处。在javascript中，您必须按照Deepanshu所说的去做。任何建议jQuery答案的人都可以指望我投反对票。这是一个简单的问题，不需要数千行外部代码来解决。@KRA如果你想要一个好的答案，请发布该PHP的HTML结果的版本。这将使问题更清楚。你能提供我可以阅读的示例代码链接吗？您好，它在演示链接中工作正常，但在我的页面上没有。您能告诉我是否需要包含任何外部js或jquery文件吗。谢谢，请确保将a标记属性id从id=a_title1替换为id=1，并再添加一个属性，即class=MyLink我被卡住了，为什么人们会投反对票？尽管答案是正确的。@Dh。。。读得更具体些

function viewdetail(divno)
{      
    if(document.getElementsByClassName("last-opened"))
    {
        document.getElementsByClassName("last-opened").style.display="none";
        document.getElementsByClassName("last-opened").title="Click to view details";

    }
    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";
        document.getElementById("a_title"+ divno).className = "last-opened";
        // Or this next line if you want to keep previous classes there.
        // document.getElementById("a_title"+ divno).className = document.getElementById("a_title"+ divno).className + "last-opened";
    }   
    return true;
}