我需要使表中的一个部分可折叠,以使其看起来更漂亮。我在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"
谢谢你的帮助。