如何展开和折叠< div>用javascript？ [英] How can I expand and collapse a <div> using javascript?

问题描述

我在自己的网站上创建了一个列表。此列表由foreach循环创建，该循环使用来自我的数据库的信息构建。每个项目都是一个具有不同部分的容器，因此这不是像1,2,3等等的列表。我列出了包含信息的重复部分。在每个部分中，都有一个小节。一般构建如下：

I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:

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

So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"

我试图操作的div是style =display：none默认情况下，我想用javascript来制作它在点击时可见。

The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.

$（this）.find（'legend'）。innerHTML试图传递，在这种情况下，展开作为函数中的参数。

The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.

这是javascript：

Here is the 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的工作原理并不十分了解。

I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.

我确实将jQuery链接到文档：

I do have jQuery linked to the document with:

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

在< head>< / head> section。

推荐答案

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

Okay, so you've got two options here :

1. 使用jQuery UI的手风琴 - 它美观，简单，快捷。查看更多信息此处


2. 或者，如果您仍想通过以下方式执行此操作你自己，你可以删除字段集（无论如何它在语义上都没有使用它）并自己创建一个结构。

1. Use jQuery UI's accordion - its nice, easy and fast. See more info here
2. Or, if you still wanna do this by yourself, you could remove the fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.

这是你如何做到的。创建一个这样的HTML结构：

Here's how you do that. Create a HTML structure like this :

<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 东西。

With this CSS: (This is to hide the .content stuff when the page loads.

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

然后，使用jQuery，写一个点击标题的事件。

Then, using jQuery, write a click event for the header.

$(".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/

这篇关于如何展开和折叠< div>用javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！