如何使用JavaScript展开和折叠<div>?

瑞安·莫滕森(Ryan Mortensen):

我已经在我的网站上创建了一个列表。该列表由一个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>节中。

克里希瓦德:

好的,这里有两个选择:

  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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章