javascript - 需要使用 js 和 html 在 php 中具有可折叠元素

Question

我需要使表格中的一个部分可折叠，以使其看起来更漂亮。我在 editor_transdata.php 中有以下代码片段

<script language="javascript">
function toggle_messege(type) {
    document.getElementById("div_messege").style.display = type;
    document.getElementById("hreh_close").style.display = type;
    }
</script>

<link type="text/css" href="../style/collapse.css" rel="stylesheet" media="all" />  

为了显示我想要折叠的内容，我有这个

            echo '<td>';
            echo '<a class="right" ';
            echo 'href=\"javascript:toggle_messege(\'inline\')\" ';
            echo 'id=\'href_about\'>';              
            echo 'Summary </a> <br />';
            echo '<a class="hide" ';
            echo 'href=\"javascript:toggle_messege(\'none\')\" ';
            echo 'id=\'hreh_close\'> (Close)</a>';

            echo '<div id=\'div_messege\' class=\'hide\'>' . $row['datasummary'];
            echo '</div>';
            echo '</td>';

我的css页面如下

.hide {
display:none;
}
.right {
float:right;
}

然而，当显示时，我得到的东西看起来像这样并且不可折叠，它看起来像这样 https://imgur.com/LBcRxCB在单击摘要之前不应显示该段落，也不应关闭该段落。单击摘要或关闭会出现以下错误:

禁止访问!

您无权访问所请求的对象。它要么是读保护的，要么是服务器不可读的。

任何关于我可以做些什么来解决这个问题的信息都会很好。

Answer 1

让你的 CSS 有一个 .show{} 类，并默认隐藏该元素:

#element{display:none}
.show{display:block}

然后让您的 js 切换类而不是切换样式类型。您可以为此使用 jQuery 或 VanillaJS - 无论您的风格是什么。

在 jquery 中它看起来像这样:

$('.toggle').click(function(){
    $("#element").toggleClass("show");
});

最后，您要显示和隐藏的 html 元素如下所示:

echo '<a href="#" class="toggle">Click this to toggle</a>\n
    <div id="element">\n'
        . $row['datasummary'] .
    '</div>';

编辑

编辑以显示对 html 的 phping，如您所愿。并添加这个想法:

或者您可以只使用 jQuery 的 .toggle() 函数:

$(".toggle").click(function(){
    $("#element").toggle();
});