[英]need to have collapsible element in php using js and html
I need to make one section in a table collapsible for making it look prettier. 我需要使表中的一部分可折叠以使其看起来更漂亮。 I have the following code snippets in editor_transdata.php
我在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" />
and to display what I want to be collapsible I have this 并显示我想折叠的东西,我有这个
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>';
my css page is as follows 我的CSS页面如下
.hide {
display:none;
}
.right {
float:right;
}
however, when displayed I get something that looks like this and is not collapsible it looks like this https://imgur.com/LBcRxCB the paragraph should not be displayed until summary is clicked, nor should close. 但是,当显示时,我得到的外观看起来像这样,并且不可折叠,看起来像这样:https://imgur.com/LBcRxCB该段落只有在单击摘要后才显示,也不应关闭。 and clicking on summary or close gives the following error:
并单击摘要或关闭会出现以下错误:
Access forbidden! 禁止访问!
You don't have permission to access the requested object. 您无权访问所请求的对象。 It is either read-protected or not readable by the server.
服务器对其进行了读保护或不可读。
Any information as to what I can do to fix this problem would be great. 关于我可以做什么来解决此问题的任何信息都将非常有用。
Make your CSS have a .show{} class, and hide the element by default: 使您的CSS具有.show {}类,并默认隐藏元素:
#element{display:none}
.show{display:block}
Then make your js toggle the class instead of toggling style type. 然后让您的js切换类而不是切换样式类型。 You can use either jQuery or VanillaJS for this - whatever is your style.
您可以使用jQuery或VanillaJS-无论您的样式是什么。
In jquery it would look like this: 在jQuery中,它看起来像这样:
$('.toggle').click(function(){
$("#element").toggleClass("show");
});
Finally, your html elements that you want to show and hide would look like this: 最后,您要显示和隐藏的html元素如下所示:
echo '<a href="#" class="toggle">Click this to toggle</a>\n
<div id="element">\n'
. $row['datasummary'] .
'</div>';
Edited to show phping the html, like you want. 编辑以显示phping html,如您所愿。 And to add this thought:
并添加此思想:
Or you could just use jQuery's .toggle()
function: 或者,您可以只使用jQuery的
.toggle()
函数:
$(".toggle").click(function(){
$("#element").toggle();
});
I created a new js function: 我创建了一个新的js函数:
function showDiv(divName){
//alert(divName);
div = document.getElementById(divName);
div.style.display="block";
}
and used the following for my php implementation: 并将以下内容用于我的php实现:
echo '<a href="#collapse" name=' . $i . ' onclick="showDiv(this.name)">Summary</a>
<div id=' . $i . ' style="display:none">'
. $row['datasummary'] .
'</div>';
and my css file: 和我的css文件:
#collapse{
display:none;
}
#collapse:target{
display:block;
}
The issue with declaring the location of the collapse.css file was incorrect. 声明collapse.css文件位置的问题不正确。 I changed the directory to "/sop/style/collapse.css"
我将目录更改为“ /sop/style/collapse.css”
Thank you for your help. 谢谢您的帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.