Jquery单击显示内容幻灯片

我在magento工作。我的任务需要实现幻灯片

我有一个容器，里面有多个物品。每一项都有不同的内容。此内容有文本，图像可能需要滑块。在正常情况下，每个内容都是隐藏的。当用户单击其中一个项目时。此内容隐藏了要显示的更改。再次单击此项目时，必须再次隐藏此内容。如果用户单击另一个不同的项目，则必须隐藏以前的内容并显示新内容

任何人都有解决这个问题的办法。多谢大家

链接pastebin下面的HTML标记说明

P/S我正在使用最新版本的引导程序

在这里试试这个

Html代码：

<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
  </div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>
<div class="office-row">
    <h3 class="office-title">Title</h3>
    <div class="office">sadasd</div>
</div>

Css代码：

.office{display: none;}

---

查看此链接：

我查看了您的链接，发现您有很多多余的代码不需要用于模型，所以我使用了一些通用ID和类，但您会发现这可以实现您所需的功能，而且非常顺利

html

css

你可以在行动中看到它

我相信你可以看到我做了什么，以及如何使用你的ID和类将其转换成

希望这有帮助

.office{display: none;}

<div class="field">
    <a href="#" key="1">Content 1</a>
    <div id="toggleMe1" class="toggleMe">Some content</div>
</div>
<div class="field">
    <a href="#" key="2">Content 2</a>
    <div id="toggleMe2" class="toggleMe">Some more but different content</div>
</div>
<div class="field">
    <a href="#" key="3">Content 3</a>
    <div id="toggleMe3" class="toggleMe">and yet some more content</div>
</div>

$(document).ready(function(){
    $("a").on("click", function(){
        var dkey = $(this).attr("key");
        $(".toggleMe").each(function(){
            var opener = "toggleMe"+ dkey;
            if($(this).attr("id") == opener){
                $(this).slideDown(500);
            }else{
                $(this).slideUp(500);
            }
        });
    });
});

.toggleMe{
    height:100px;
    width:100px;
    background:#e7e7e7;
    display:none;
}
.field{
    display:block;
}
a{
    background:#e7e7e7;
    color:#000;
    border:1px solid #000;
    padding:1px 8px;
    line-height:10px;
}