如何使用javascript展开和折叠？(How can I expand and collapse a using 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>

所以，我试图调用一个函数onclick =“majorpointsexpand（$（this）.find（'legend'）。innerHTML）”

我想要操纵的div是style =“display：none”，默认情况下，我想使用javascript使其可以点击。

在这种情况下，“$（this）.find（'legend'）。innerHTML”尝试通过“Expand”作为函数中的参数。

这是javascript：

我几乎100％肯定我的问题是语法，我对javascript的工作原理没有太多的把握。

我有jQuery链接到文档：

在<head></head>部分。

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>

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

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.

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

Here is the javascript:

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

I do have jQuery linked to the document with:

In the <head></head> section.

最满意答案

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

使用jQuery UI手风琴 - 它的漂亮，简单快捷。在这里查看更多信息或者，如果你仍然想自己做这个，你可以删除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/

Okay, so you've got two options here :

Use jQuery UI's accordion - its nice, easy and fast. See more info here 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.

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>

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

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

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

Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/

更多推荐