如何展开和折叠使用JavaScript的<div>？
我在我的网站上创build了一个列表。 这个列表是由一个foreach循环创build的，它使用我的数据库中的信息构build。 每个项目是一个不同部分的容器，所以这不是一个列表，如1，2，3 …等我列出重复部分的信息。 在每个部分，都有一个小节。 一般构build如下：
<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是默认的样式=“显示：无”，我想使用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="jquery-1.9.1.min.js"></script>
在<head></head>部分。
好的，在这里你有两个select：
- 使用jQuery UI的手风琴 – 它的好，简单和快速。 在这里看到更多信息
- 或者，如果你仍然想自己做，你可以删除
fieldset（它在语义上不是正确的使用它），并创build一个自己的结构。
以下是你如何做到这一点。 像这样创build一个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/
怎么样：
jQuery的：
$('.majorpoints').click(function(){ $(this).find('.hider').toggle(); });
HTML
<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中。
所以，首先，你的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/
还有第三种方法是使用jQuery的slideToggle方法，它允许一些效果。 如$('#showMe').slideToggle('slow'); 这将缓慢显示隐藏的div。
这里有很多问题
我已经设置了一个适合你的小提琴： http : //jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){ if($(this).text()=='Expand'){ $('#mylist').show(); $(this).text('Colapse'); }else{ $('#mylist').hide(); $(this).text('Expand'); } });
试试jQuery，
<div> <a href="#" class="majorpoints" onclick="majorpointsexpand(" + $('.majorpointslegend').html() + ")"/> <legend class="majorpointslegend">Expand</legend> <div id="data" style="display:none" > <ul> <li></li> <li></li> </ul> </div> </div> function majorpointsexpand(expand) { if (expand == "Expand") { $('#data').css("display","inherit"); $(".majorpointslegend").html("Collapse"); } else { $('#data').css("display","none"); $(".majorpointslegend").html("Expand"); } }
这里有我的animation演员的例子，扩大描述。
<html> <head> <style> .staff { margin:10px 0;} .staff-block{ float: left; width:48%; padding-left: 10px; padding-bottom: 10px;} .staff-title{ font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white; padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; border-top-right-radius: 6px; font-weight: bold;} .staff-name { font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;} .staff-name:hover { background-color: silver !important; cursor: pointer;} .staff-section { display:inline-block; padding-left: 10px;} .staff-desc { font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; display: block; border: solid 1px silver;} .staff-desc p { text-align: justify; margin-top: 5px;} .staff-desc img { margin: 5px 10px 5px 5px; float:left; height: 185px; } </style> </head> <body> <!-- START STAFF SECTION --> <div class="staff"> <div class="staff-block"> <div class="staff-title">Staff</div> <div class="staff-section"> <div class="staff-name">Maria Beavis</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p> </div> <div class="staff-name">Diana Smitt</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p> </div> <div class="staff-name">Mike Ford</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p> </div> </div> </div> <div class="staff-block"> <div class="staff-title">Technical Advisors</div> <div class="staff-section"> <div class="staff-name">TA Elvira Bett</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client portfolios, maintaining investment objectives, and executing client trades.</p> </div> <div class="staff-name">TA Sonya Rosman</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Sonya has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses through the Canadian Securities Institute. She recently completed her Wealth Management Essentials course and became an Investment Associate.</p> </div> <div class="staff-name">TA Tim Herson</div> <div class="staff-desc"> <p><img src="http://www.craigmarlatt.com/canadahttp://img.dovov.comsecurity&defence/coulombe.jpg" />Tim joined his father’s group in order to continue advising affluent families in Quebec. He is currently President of the Mike Ford Professionals Association and a member of various other organisations.</p> </div> </div> </div> </div> <!-- STOP STAFF SECTION --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script language="javascript"><!-- //<![CDATA[ $('.staff-name').hover(function() { $(this).toggleClass('hover'); }); var lastItem; $('.staff-name').click(function(currentItem) { var currentItem = $(this); if ($(this).next().height() == 0) { $(lastItem).css({'font-weight':'normal'}); $(lastItem).next().animate({height: '0px'},400,'swing'); $(this).css({'font-weight':'bold'}); $(this).next().animate({height: '300px',opacity: 1},400,'swing'); } else { $(this).css({'font-weight':'normal'}); $(this).next().animate({height: '0px',opacity: 1},400,'swing'); } lastItem = $(this); }); //]]> --></script> </body></html>
小提琴
既然你在页面上有jQuery，你可以删除onclick属性和majorpointsexpand函数。 将以下脚本添加到页面的底部，或者最好添加到外部的.js文件中：
$(function(){ $('.majorpointslegend').click(function(){ $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' ); }); });
这个解决scheme应该和你的HTML一样工作，但这不是一个非常健壮的答案。 如果您更改您的fieldset布局，它可能会打破它。 我build议你把一个class属性放在那个隐藏的div中，比如class="majorpointsdetail"然后使用这个代码：
$(function(){ $('.majorpoints').on('click', '.majorpointslegend', function(event){ $(event.currentTarget).find('.majorpointsdetail').toggle(); $(this).text( $(this).is(':visible')?'Collapse':'Expand' ); }); });
Obs：在你的问题中没有closures的</fieldset>标签，所以我假设隐藏的div在fieldset中。
你可能想看看这个简单的Javascript方法，当点击一个链接来使面板/ div展开或折叠时，将被调用。
<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
如果你使用可折叠的数据angular色，例如
<div id="selector" data-role="collapsible" data-collapsed="true"> html...... </div>
那么它将closures扩展的div
$("#selector").collapsible().collapsible("collapse");
<HTML><head><script language="javascript">function show(){document.getElementById("test").innerHTML='byeee';document.getElementById("test").style.height='200px';document.getElementById("test").style.width='200px';document.getElementById("test").style.transition='all 2s';}</script></head><body><style>div{width:100px;height:100px;border:2px solid blue;background-color:orange;}</style><div id="test"> hello </div><input type="button" value="okk" onclick="show()"/></body></HTML>
