Rya*_*sen 85 javascript jquery
我在我的网站上创建了一个列表.此列表由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>部分.
kri*_*ath 172
好的,所以你有两个选择:
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/
raa*_*m86 19
怎么样:
$('.majorpoints').click(function(){
$(this).find('.hider').toggle();
});
<div>
<fieldset class="majorpoints">
<legend class="majorpointslegend">Expand</legend>
<div class="hider" style="display:none" >
<ul>
<li>cccc</li>
<li></li>
</ul>
</div>
</div>
这样,您就可以将click事件绑定到.majorpoints类,而不必每次都在HTML中编写它.
这里有很多问题
我已经设置了一个适合你的小提琴:http://jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
所以,首先,你的Javascript甚至不使用jQuery.有几种方法可以做到这一点.例如:
第一种方法,使用jQuery toggle方法:
<div class="expandContent">
<a href="#">Click Here to Display More Content</a>
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').toggle();
});
</script>
jsFiddle:http: //jsfiddle.net/pM3DF/
另一种方法是使用jQuery show方法:
<div class="expandContent">
<a href="#">Click Here to Display More Content</a>
</div>
<div class="showMe" style="display:none">
This content was hidden, but now shows up
</div>
<script>
$('.expandContent').click(function(){
$('.showMe').show();
});
</script>
jsFiddle:http://jsfiddle.net/Q2wfM/
第三种方法是使用slideTogglejQuery方法,它允许一些效果.比如$('#showMe').slideToggle('slow');哪会慢慢显示隐藏的div.
您可能想要查看在单击链接以进行面板/ div展开或折叠时要调用的这个简单Javascript方法.
<script language="javascript">
function toggle(elementId) {
var ele = document.getElementById(elementId);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
您可以传递div ID,它将在显示'none'或'block'之间切换.
snip2code上的原始资源- 如何在html中折叠div