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


need to have collapsible element in php using js and html

我需要使表中的一个部分可折叠,以使其看起来更漂亮。我在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://i.stack.imgur.com/6vCTJ.jpg在单击摘要之前不应显示该段落,也不应关闭该段落。点击摘要或关闭会出现以下错误:

禁止访问!

您没有访问请求对象的权限。它要么被读取保护,要么不可被服务器读取。

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

让你的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>';

编辑

编辑后显示phping的html,就像你想要的那样。再加上这个想法:

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

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

我创建了一个新的js函数:

    function showDiv(divName){
    //alert(divName);
    div = document.getElementById(divName);
    div.style.display="block";
    }

并将以下内容用于我的php实现:

 echo '<a href="#collapse" name=' . $i . ' onclick="showDiv(this.name)">Summary</a>
<div id=' . $i . ' style="display:none">'
. $row['datasummary'] . 
'</div>';

和我的css文件:

#collapse{
display:none;
}
#collapse:target{
display:block;
}

声明collapse.css文件位置的问题不正确。我将目录更改为"/sop/style/collate.css"

谢谢你的帮助。