我已经在我的网站上创建了一个列表。该列表由一个foreach循环创建,该循环使用我数据库中的信息进行构建。每个项目都是一个包含不同部分的容器,因此这不是像1、2、3 ...这样的列表。我列出的是重复部分,并提供信息。在每个部分中都有一个小节。常规构建如下:
<div>
<fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
<legend class="majorpointslegend">Expand</legend>
<div style="display:none" >
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
因此,我尝试使用onclick =“ majorpointsexpand($(this).find('legend')。innerHTML)”调用函数
我尝试操作的div默认情况下为style =“ display:none”,我想使用JavaScript使其在点击时可见。
在这种情况下,“ $(this).find('legend')。innerHTML”试图将“ Expand”作为函数中的参数传递。
这是JavaScript:
function majorpointsexpand(expand)
{
if (expand == "Expand")
{
document.write.$(this).find('div').style = "display:inherit";
document.write.$(this).find('legend').innerHTML = "Collapse";
}
else
{
document.write.$(this).find('div').style = "display:none";
document.write.$(this).find('legend').innerHTML = "Expand";
}
}
我几乎100%地确定我的问题是语法,并且我对javascript的工作方式没有太多了解。
我确实使用以下方法将jQuery链接到文档:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
在本<head></head>
节中。
好的,这里有两个选择:
fieldset
(无论如何在语义上都不适合为此目的使用)并自己创建一个结构。这是您的操作方式。创建这样的HTML结构:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
使用此CSS :(这是.content
在页面加载时隐藏内容。
.container .content {
display: none;
padding : 5px;
}
然后,使用jQuery click
为标头编写一个事件。
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
这是一个演示:http : //jsfiddle.net/hungerpain/eK8X5/7/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句