javascript - 如何展开和折叠
使用 javascript？

Question

我在我的网站上创建了一个列表。此列表由使用我的数据库中的信息构建的 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>节。

score 188 · Accepted Answer

好的，所以你有两个选择：

使用 jQuery UI 的手风琴——它很好、简单、快速。在此处查看更多信息
或者，如果您仍然想自己执行此操作，您可以删除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/

score 22 · Accepted Answer

怎么样：

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 中编写它。

score 8 · Accepted Answer

您可能想看一下在单击链接以使面板/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，它将在显示“无”或“阻止”之间切换。

snip2code上的原始来源-如何在 html 中折叠 div

score 7 · Accepted Answer

因此，首先，您的 Javascript 甚至没有使用 jQuery。有几种方法可以做到这一点。例如：

第一种方式，使用 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/

另一种方法是简单地使用 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/

第三种方法是使用slideTogglejQuery 的方法，它允许一些效果。比如$('#showMe').slideToggle('slow');哪个会慢慢显示隐藏的div。

score 7 · Accepted Answer

这里有很多问题

我已经设置了一个适合你的小提琴：http: //jsfiddle.net/w9kSU/

$('.majorpointslegend').click(function(){
    if($(this).text()=='Expand'){
        $('#mylist').show();
        $(this).text('Colapse');
    }else{
        $('#mylist').hide();
        $(this).text('Expand');
    }
});

score 3 · Accepted Answer

试试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");
            }
    }

score 3 · Accepted Answer

这是我的动画示例，带有扩展描述的人员列表。

<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&#8217;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>

小提琴

score 3 · Accepted Answer

看一下toggle() jQuery函数：

http://api.jquery.com/toggle/

此外，innerHTML jQuery函数是.html().

score 2 · Accepted Answer

由于页面上有 jQuery，因此可以删除该onclick属性和majorpointsexpand函数。将以下脚本添加到页面底部，或者最好添加到外部 .js 文件：

$(function(){

  $('.majorpointslegend').click(function(){
    $(this).next().toggle().text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

此解决方案应按原样与您的 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：你的问题中没有结束</fieldset>标签，所以我假设隐藏的 div 在字段集中。

score 1 · Accepted Answer

查看 Jed Foster 的Readmore.js库。

它的用法很简单：

$(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>

以下是配置小部件的可用选项：

{
  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() {}
},

使用可以像这样使用它：

$('article').readmore({
  collapsedHeight: 100,
  moreLink: '<a href="#" class="you-can-also-add-classes-here">Continue reading...</a>',
});

我希望它有所帮助。

score 1 · Accepted Answer

纯 javascript 一次只允许一个扩展的 div。它允许多级子扩展器。html 只需要扩展器内容。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>&nbsp;<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>&nbsp;<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>&nbsp;<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>

score 1 · Accepted Answer

如果您使用可折叠的数据角色，例如

    <div id="selector" data-role="collapsible" data-collapsed="true">
    html......
    </div>

然后它将关闭展开的 div

    $("#selector").collapsible().collapsible("collapse");

score 0 · Accepted Answer

使用纯 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>

javascript - 如何展开和折叠使用 javascript？

13 回答 13

jQuery：

HTML

小提琴

Related

Reference

javascript - 如何展开和折叠
使用 javascript？