如何展开和折叠a<；部门>；使用javascript？

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

我几乎100%确定我的问题是语法，我对javascript的工作原理没有太多的了解

我确实将jQuery链接到具有以下内容的文档：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

在

部分。

如何：

jQuery： HTML

扩大

中交

这样，您就可以将单击事件绑定到

.majorpoints

类，而不必每次都用HTML编写它。

这里有很多问题

我为你准备了一把小提琴：

---

看看

toggle（）

jQuery函数：

---

另外，

innerHTML

jQuery函数是

.html（）

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

第一种方法，使用jQuery

切换方法：

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

<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：

然而，第三种方法是使用jQuery的
slideToggle
方法，它允许一些效果。例如
$（'#showMe'）.slideToggle（'slow'）将缓慢显示隐藏的div。
尝试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");
            }
    }


扩大




函数主点扩展（扩展）
{
如果（扩展==“扩展”）
{
$（'#data'）.css（“显示”、“继承”）；
$（“.majorpointslegend”）.html（“折叠”）；
}
其他的
{
$（“#数据”）.css（“显示”、“无”）；
$（“.majorPointsGend”）.html（“展开”）；
}
}
因为页面上有jQuery，所以可以删除
onclick
属性和
majorpointsexpand
函数。将以下脚本添加到页面底部，或者最好添加到外部.js文件：

$(function(){

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

});

这个解决方案应该可以按原样处理HTML，但它并不是一个非常可靠的答案。如果更改
字段集
布局，它可能会破坏它。我建议您在隐藏的div中添加一个
class
属性，比如
class=“majorpointsdetail”
，并使用以下代码：

$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

Obs：您的问题中没有结束标记，因此我假设隐藏的div位于字段集中。
好的，这里有两个选项：

使用jQueryUI的手风琴——它漂亮、简单、快速。查看更多信息
或者，如果你仍然想自己做这件事，你可以删除
字段集
（不管怎么说，在语义上使用它是不正确的），然后自己创建一个结构
这是你怎么做到的。创建如下所示的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>

然后，使用jQuery为标题编写一个
单击事件

$(".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";
        });
    });

});

下面是一个演示：
您可能想看看这个简单的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>


功能切换（elementId）{
var ele=document.getElementById（elementId）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}
否则{
ele.style.display=“块”；
}
} 

您可以传递div ID，它将在显示“无”或“块”之间切换

SNIP2代码的原始源代码-


.工作人员{保证金：10px 0；}
.staff块{浮动：左侧；宽度：48%；左侧填充：10px；底部填充：10px；}
.staff title{字体系列：Verdana、Tahoma、Arial、Serif；背景色：#1162c5；颜色：白色；填充：4px；边框：实心1px#2e3d7a；边框左上半径：3px；边框右上半径：6px；字体重量：粗体；}
.staff name{字体系列：Myriad Web Pro；字体大小：11pt；线条高度：30px；填充：0 10px；}
.staff name:hover{背景色：银色！重要；光标：指针；}
.staff节{显示：内联块；左填充：10px；}
.staff desc{字体系列：Myriad Web Pro；高度：0px；填充：3px；溢出：隐藏；背景色：#def；显示：块；边框：纯银1px；}
.staff desc p{text align:justify；页边距顶端：5px；}
.staff desc img{margin:5px 10px 5px 5px；float:left；height:185px；}
工作人员
玛丽亚·比维斯
玛丽亚于2006年获得麦吉尔大学商学学士学位，主修金融和国际商务。她在加拿大证券研究所完成了财富管理基础课程，自2007年以来一直在该行业工作

戴安娜·斯密特
戴安娜加入戴安娜·斯密特集团，以帮助实现其提供卓越投资建议和卓越服务的持续承诺。她拥有约翰·莫尔森商学院（John Molson School of Business）的商业学士学位，主修金融，并通过完成课程继续学业

迈克·福特
迈克：纪尧姆毕业于蒙特利尔高等商业学院（HEC），拥有特许投资管理协会（CIM）。在一家领先竞争对手的金融服务行业活跃了4年后，他加入了迈克·福特集团

技术顾问
塔埃尔维拉贝特
埃尔维拉在加拿大证券研究所完成了财富管理基础课程，自2007年以来一直在该行业工作。劳拉w
$(function(){

  $('.majorpoints').on('click', '.majorpointslegend', function(event){
    $(event.currentTarget).find('.majorpointsdetail').toggle();
    $(this).text( $(this).is(':visible')?'Collapse':'Expand' );
  });

});

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

.container .content {
    display: none;
    padding : 5px;
}

$(".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";
        });
    });

});

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

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

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

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