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

1. 使用 jQuery UI 的手风琴 - 它很好，简单且快速。在此处查看更多信息
2. 或者，如果你仍然想自己做这件事，你可以删除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/

怎么样：

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

您可能想看看在单击链接以使面板/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

所以，首先，您的 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。

这里问题很多

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

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