jQuery 如何使用 javascript 展开和折叠 <div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17460116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I expand and collapse a <div> using javascript?
提问by Ryan Mortensen
I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:
我在我的网站上创建了一个列表。此列表由使用我的数据库中的信息构建的 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>
So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"
所以，我试图用 onclick="majorpointsexpand($(this).find('legend').innerHTML)" 调用一个函数
The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.
默认情况下，我尝试操作的 div 是 style="display:none"，我想使用 javascript 使其在单击时可见。
The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.
"$(this).find('legend').innerHTML" 试图传递，在这种情况下， "Expand" 作为函数中的参数。
Here is the javascript:
这是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";
}
}
I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.
我几乎 100% 确定我的问题是语法，而且我对 javascript 的工作原理不太了解。
I do have jQuery linked to the document with:
我确实有 jQuery 链接到文档：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
In the <head></head>section.
在<head></head>部分。
回答by krishgopinath
Okay, so you've got two options here :
好的，所以你在这里有两个选择：
- Use jQuery UI's accordion - its nice, easy and fast. See more info here
- Or, if you still wanna do this by yourself, you could remove the
fieldset(its not semantically right to use it for this anyway) and create a structure by yourself.
- 使用 jQuery UI 的手风琴 - 它很好，简单且快速。在这里查看更多信息
- 或者，如果你仍然想自己做这件事，你可以删除
fieldset（无论如何在语义上使用它是不正确的）并自己创建一个结构。
Here's how you do that. Create a HTML structure like this :
这是你如何做到的。创建一个像这样的 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>
With this CSS: (This is to hide the .contentstuff when the page loads.
使用此 CSS：（这是.content在页面加载时隐藏内容。
.container .content {
display: none;
padding : 5px;
}
Then, using jQuery, write a clickevent for the header.
然后，使用 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";
});
});
});
Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/
回答by raam86
how about:
怎么样：
jQuery:
jQuery：
$('.majorpoints').click(function(){
$(this).find('.hider').toggle();
});
HTML
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>
Fiddle
小提琴
This way you are binding the click event to the .majorpointsclass an you don't have to write it in the HTML each time.
这样您就可以将 click 事件绑定到.majorpoints类，而不必每次都在 HTML 中编写它。
回答by David Lin
Many problems here
这里问题很多
I've set up a fiddle that works for you: http://jsfiddle.net/w9kSU/
我已经设置了一个适合你的小提琴：http: //jsfiddle.net/w9kSU/
$('.majorpointslegend').click(function(){
if($(this).text()=='Expand'){
$('#mylist').show();
$(this).text('Colapse');
}else{
$('#mylist').hide();
$(this).text('Expand');
}
});
回答by Mike Hawkins
So, first of all, your Javascript isn't even using jQuery. There are a couple ways to do this. For example:
所以，首先，您的 Javascript 甚至没有使用 jQuery。有几种方法可以做到这一点。例如：
First way, using the jQuery togglemethod:
第一种方式，使用jQuerytoggle方法：
<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/
jsFiddle：http: //jsfiddle.net/pM3DF/
Another way is simply to use the jQuery showmethod:
另一种方法是简单地使用 jQueryshow方法：
<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/
jsFiddle：http: //jsfiddle.net/Q2wfM/
Yet a third way is to use the slideTogglemethod of jQuery which allows for some effects. Such as $('#showMe').slideToggle('slow');which will slowly display the hidden div.
还有第三种方法是使用slideTogglejQuery的方法，它允许一些效果。比如$('#showMe').slideToggle('slow');里面会慢慢显示隐藏的div。
回答by Mike Scattoni
You might want to give a look at this simple Javascript method to be invoked when clicking on a link to make a panel/div expande or collapse.
您可能想看看在单击链接以使面板/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>
You can pass the div ID and it will toggle between display 'none' or 'block'.
您可以传递 div ID，它将在显示“无”或“阻止”之间切换。
Original source on snip2code- How to collapse a div in html
snip2code上的原始来源-如何折叠 html 中的 div
回答by Intacto
Here there is my example of animation a staff list with expand a description.
<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/canada/images/security&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/canada/images/security&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/canada/images/security&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/canada/images/security&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/canada/images/security&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/canada/images/security&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>
回答by isThisLove
Take a look at toggle()jQueryfunction :
看看toggle()jQuery函数：
Also, innerHTMLjQueryFunction is .html().
此外，innerHTMLjQuery函数是.html().
回答by nmanandhan
try jquery,
试试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");
}
}
回答by sergiopereira
Since you have jQuery on the page, you can remove that onclickattribute and the majorpointsexpandfunction. Add the following script to the bottom of you page or, preferably, to an external .js file:
由于页面上有 jQuery，您可以删除该onclick属性和majorpointsexpand函数。将以下脚本添加到页面底部，或者最好添加到外部 .js 文件：
$(function(){
$('.majorpointslegend').click(function(){
$(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
This solutionshould work with your HTML as is but it isn't really a very robust answer. If you change your fieldsetlayout, it could break it. I'd suggest that you put a classattribute in that hidden div, like class="majorpointsdetail"and use this code instead:
此解决方案应按原样适用于您的 HTML，但它实际上并不是一个非常可靠的答案。如果你改变你的fieldset布局，它可能会破坏它。我建议您class在隐藏的 div 中放置一个属性，例如class="majorpointsdetail"并使用以下代码：
$(function(){
$('.majorpoints').on('click', '.majorpointslegend', function(event){
$(event.currentTarget).find('.majorpointsdetail').toggle();
$(this).text( $(this).is(':visible')?'Collapse':'Expand' );
});
});
Obs: there's no closing </fieldset>tag in your question so I'm assuming the hidden div is inside the fieldset.
Obs：</fieldset>您的问题中没有结束标记，所以我假设隐藏的 div 位于字段集内。
回答by Atif Hussain
If you used the data-role collapsible e.g.
如果您使用可折叠的数据角色，例如
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
then it will close the the expanded div
然后它将关闭扩展的 div
$("#selector").collapsible().collapsible("collapse");
