Question

我的问题是，我在页面中有三个单独的部分，显示了产品/服务的示例，我需要的是在每个特定部分下面添加一个切换div，可以显示产品的更多详细信息，但另一部分当点击锚点时，必须关闭以前显示的部分。

这里可以看到一个例子：http://www.bamboohr.com/tour.php。

我想复制div中显示更多信息的方式。

非常感谢任何帮助，谢谢。

这是我的代码：

-container -

-section id =“services” -

-div -

-a href =“” - / a-（！ - ===将打开div === - 的锚点）

- /格 -

-div - / div - （！ - === div将打开=== - ）

- /部分 -

-section id =“services” -

-div -

-a href =“” - / a-（！ - ===将打开div === - 的锚点）

- /格 -

-div - / div - （！ - === div将打开=== - ）

- /部分 -

-section id =“services” -

-div -

-a href =“” - / a-（！ - ===将打开div === - 的锚点）

- /格 -

-div - / div - （！ - === div将打开=== - ）

- /部分 -

- /容器 -

Answer 1

Jquery UI手风琴控制可能就是您所需要的。

点击此链接：http://jqueryui.com/accordion/

Answer 2

您使用jQuery的slideToggle功能

试用fiddle

<强> HTML

<div class="box">Click div1</div>
<div class="toggle_div">this is the content of toggle div 1</div>
<div class="box">Click div2</div>
<div class="toggle_div">this is the content of toggle div 2</div>
<div class="box">Click div3</div>
<div class="toggle_div">this is the content of toggle div 3</div>

<强> CSS

.box {
    margin-bottom: 20px;
}
.toggle_div {
    border: 1px solid #000;
    background: #000;
    color: #fff;
    display: none;
}

<强> JS

$('.box').click(function () {
    $('.active').slideToggle('slow', function() {
        $(this).removeClass('active');
    });
    $(this).next('div').addClass('active').slideToggle("slow")
});

有问题切换多个div

2 个答案: