如何展开和折叠<div>使用javascript？
[英]How can I expand and collapse a <div> using javascript?
问题描述
I have created a list on my site.
我在我的网站上创建了一个列表。 This list is created by a foreach loop that builds with information from my database.此列表由使用我的数据库中的信息构建的 foreach 循环创建。 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.每个项目都是具有不同部分的容器，因此这不是像 1、2、3... 等那样的列表。我列出了包含信息的重复部分。 In each section, there is a subsection.在每个部分中，都有一个小节。 The general build is as follows:一般构建如下：
<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>部分。
13 个解决方案
解决方案1
172 已采纳 2013-07-04 00:42:56
Okay, so you've got two options here : 好的，这里有两个选择：
- Use jQuery UI's accordion - its nice, easy and fast. 使用jQuery UI的手风琴-美观，便捷，快速。 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.或者，如果您仍然想自己执行此操作，则可以删除该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 .content stuff when the page loads. 使用此CSS ：（这是在页面加载时隐藏.content内容。
.container .content {
display: none;
padding : 5px;
}
Then, using jQuery, write a click event 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/ 这是一个演示： http : //jsfiddle.net/hungerpain/eK8X5/7/
解决方案2
19 2013-07-04 00:25:10
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 .majorpoints class an you don't have to write it in the HTML each time. 这样，您就可以将click事件绑定到.majorpoints类，而不必每次都将其写入HTML。
解决方案3
6 2013-07-04 00:28:20
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');
}
});
解决方案4
6 2013-07-04 00:33:50
So, first of all, your Javascript isn't even using jQuery. 因此，首先，您的Javascript甚至没有使用jQuery。 There are a couple ways to do this. 有两种方法可以做到这一点。 For example: 例如：
First way, using the jQuery toggle method: 第一种方法，使用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/ jsFiddle： http : //jsfiddle.net/pM3DF/
Another way is simply to use the jQuery show method: 另一种方法是简单地使用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/ jsFiddle： http : //jsfiddle.net/Q2wfM/
Yet a third way is to use the slideToggle method of jQuery which allows for some effects. 第三种方法是使用jQuery的slideToggle方法，该方法允许一些效果。 Such as $('#showMe').slideToggle('slow'); 如$('#showMe').slideToggle('slow'); which will slowly display the hidden div. 它将缓慢显示隐藏的div。
解决方案5
5 2014-01-11 10:11:58
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. 您可能想看看单击链接以使panel / 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
解决方案6
3 2013-07-04 00:28:41
Take a look at toggle() jQuery function : 看一下toggle() jQuery函数：
http://api.jquery.com/toggle/ http://api.jquery.com/toggle/
Also, innerHTML jQuery Function is .html() . 另外， innerHTML jQuery Function是.html() 。
解决方案7
3 2013-07-04 00:34:23
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");
}
}
解决方案8
3 2014-05-20 18:16:55
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>
解决方案9
2 2013-07-04 00:41:51
Since you have jQuery on the page, you can remove that onclick attribute and the majorpointsexpand function. 由于页面上有jQuery，因此可以删除该onclick属性和majorpointsexpand函数。 Add the following script to the bottom of you page or, preferably, to an external .js file: 将以下脚本添加到页面底部，或者最好添加到外部.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. 此解决方案应该可以直接与HTML一起使用，但实际上并不是一个非常可靠的答案。 If you change your fieldset layout, it could break it. 如果更改fieldset布局，则可能会破坏它。 I'd suggest that you put a class attribute in that hidden div, like class="majorpointsdetail" and use this code instead: 我建议您在该隐藏的div中放置一个class属性，例如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位于字段集中。
解决方案10
1 2016-08-29 10:00:00
If you used the data-role collapsible eg 如果您使用了可折叠的数据角色，例如
<div id="selector" data-role="collapsible" data-collapsed="true">
html......
</div>
then it will close the the expanded div 然后它将关闭展开的div
$("#selector").collapsible().collapsible("collapse");
解决方案11
1 2018-09-27 14:31:08
Check out Jed Foster's Readmore.js library. 查看Jed Foster的Readmore.js库。
It's usage is as simple as: 它的用法很简单：
$(document).ready(function() { $('article').readmore({collapsedHeight: 100}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js" type="text/javascript"></script> <article> <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p> <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p> <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p> <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p> </article>
Here are the available options to configure your widget: 以下是配置窗口小部件的可用选项：
{ speed: 100, collapsedHeight: 200, heightMargin: 16, moreLink: '<a href="#">Read More</a>', lessLink: '<a href="#">Close</a>', embedCSS: true, blockCSS: 'display: block; width: 100%;', startOpen: false, // callbacks blockProcessed: function() {}, beforeToggle: function() {}, afterToggle: function() {} },
Use can use it like: 使用可以像下面这样使用：
$('article').readmore({ collapsedHeight: 100, moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>', });
I hope it helps. 希望对您有所帮助。
解决方案12
1 2021-10-13 16:04:32
Pure javascript allowing only one expanded div at a time.纯 javascript 一次只允许一个展开的 div。 It allows multi-level sub-expanders.它允许多级子扩展器。 The html only need the expanders contents. html 只需要扩展器内容。 The javascript will create the expanders headers with the titles form the content data attribute and a svg arrow. javascript 将创建扩展器标题，标题来自内容数据属性和 svg 箭头。
<style>
/* expanders headers divs */
.expanderHead {
color: white;
background-color: #1E9D8B;
border: 2px solid #1E9D8B;
margin-top: 9px;
border-radius: 6px;
padding: 3px;
padding-left: 9px;
cursor: default;
font-family: Verdana;
font-size: 14px;
}
.expanderHead:first-child {
margin-top: 0 !important;
}
.expanderBody:last-child {
margin-bottom: 0 !important;
}
/* expanders svg arrows */
.expanderHead svg > g > path {
fill: none;
stroke: white;
stroke-width: 2;
stroke-miterlimit: 5;
pointer-events: stroke;
}
/* expanders contents divs */
.expanderBody {
border: 2px solid #1E9D8B;
border-top: 0;
background-color: white;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
padding: 6px;
font-family: Verdana;
font-size: 12px;
}
/* widget window */
.widget {
width: 400px;
background-color: white;
padding: 9px;
border: 2px solid #1E9D8B;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<div class="widget">
<div data-title="expander 1" class="expanderBody">
expander 1 content
</div>
<div data-title="expander 2" class="expanderBody">
expander 2 content
</div>
<div data-title="expander 3" class="expanderBody">
<div>
expander 3 content
</div>
<div data-title="expander 3.1" class="expanderBody">
expander 3.1 content
</div>
<div data-title="expander 3.2" class="expanderBody">
expander 3.2 content
</div>
<div data-title="expander 3.3" class="expanderBody">
expander 3.3 content
</div>
</div>
</div>
<script>
document.querySelectorAll(".expanderBody").forEach(item => {
if (item.dataset.title) {
// create expander header
let divHeader = document.createElement("div");
divHeader.className = "expanderHead";
divHeader.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + item.dataset.title + "</span>";
// expander click event
divHeader.addEventListener("click", function () {
// open / close expander
for (let i = 0; i < this.parentNode.children.length; i++) {
let expander = this.parentNode.children[i];
// check if it's expander header
if (expander.className == "expanderHead") {
if (expander == this && expander.nextElementSibling.style.display == "none") {
// open expander body
expander.nextElementSibling.style.display = "";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 1 5 L 5 1'/><path d='M 5 1 L 10 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "0";
expander.style.borderBottomRightRadius = "0";
}
else {
// close expander body
expander.nextElementSibling.style.display = "none";
expander.innerHTML = "<svg width='14px' height='8px' viewBox='0 0 12 6'><g><path d='M 5 5 L 10 1'/><path d='M 1 1 L 5 5'/></g></svg> <span>" + expander.nextElementSibling.dataset.title + "</span>";
expander.style.borderBottomLeftRadius = "6px";
expander.style.borderBottomRightRadius = "6px";
}
}
}
}, true);
item.parentNode.insertBefore(divHeader, item);
item.style.display = "none";
}
});
</script>
解决方案13
0 2021-06-25 05:53:10
Using Pure Javascript使用纯 Javascript
const collapsableBtn = document.querySelectorAll('.collapsable-toggle'); for (let index = 0; index < collapsableBtn.length; index++) { collapsableBtn[index].addEventListener('click', function(e) { // e.preventDefault(); e.stopImmediatePropagation(); iterateElement = this; getCollapsableParent = iterateElement.parentElement; if(getCollapsableParent.classList.contains('show')) { getCollapsableParent.classList.remove('show') iterateElement.innerText = iterateElement.getAttribute('data-onCloseText'); } else { getCollapsableParent.classList.add('show'); iterateElement.innerText = iterateElement.getAttribute('data-onOpenText'); } }) }
.collapsable-container #expand { display:none; } .collapsable-container.show #expand { display:block; }
<div class="collapsable-container"> <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide First Content" data-onCloseText="Show First Content">Show First Content</a> <div id="expand"> This is some Content </div> </div> <div class="collapsable-container"> <a href="javascript:void(0);" class="collapsable-toggle" data-onOpenText="Hide Second Content" data-onCloseText="Show Second Content">Show Second Content</a> <div id="expand"> This is some Content </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.