javascript - 在切换多个 div 时遇到问题

Question

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

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

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

任何帮助将不胜感激，谢谢。

这是我的代码：

-容器-

-section id="服务"-

-div-

-a href=""--/a- (!-=== 将打开 div ===- 的锚点)

-/div-

-div--/div-(!-=== 将打开的 div ===-)

-/部分-

-section id="服务"-

-div-

-a href=""--/a- (!-=== 将打开 div ===- 的锚点)

-/div-

-div--/div-(!-=== 将打开的 div ===-)

-/部分-

-section id="服务"-

-div-

-a href=""--/a- (!-=== 将打开 div ===- 的锚点)

-/div-

-div--/div-(!-=== 将打开的 div ===-)

-/部分-

-/容器-

Answer 1

您使用 jQuery 的slideToggle功能

试试小提琴

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