javascript - 在网页中创建可扩展区域

Question

我是 CSS 和 Javascript 的新手。我想在页面中创建一个特定区域(我使用 div 标记)，一旦在其中单击链接，该区域就会扩展并显示其他内容。我设法创建了一个只完成部分工作的代码:点击后显示新内容，但该内容不显示在区域边界内。简而言之，区域没有扩大，只显示了一个新内容...有什么建议吗？

Answer 1

我真的很喜欢这个 jQuery Accordion 方法:

现场演示: http://jsfiddle.net/kbZDv/1/

它易于使用，样式美观。

您需要做的就是包含最新版本的 jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">

这是 HTML 标记:

<p class="trigger"><a href="#">Click here to expand and reveal more information</a></p>
<div class="toggle_container">
   <div class="block">
        <p>Content goes here.</p>
    </div>
</div>

基本(尚待设计)CSS:

p.trigger{
    margin-bottom:7px;
    margin-top:-5px;
}

.toggle_container{
    margin-bottom:10px;
}

.toggle_container p{
    margin:0px;
}

.toggle_container{
    background:#f0f0f0;
    clear: both;
    font-size:100%;
}

所有重要的 jQuery 让它工作:

$(".toggle_container").hide();

    $("p.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("normal");
    });