Question

我正在研究magento。我的任务需要实现幻灯片

我有一个容器里面有多个项目。每个项目都有不同的内容。此内容包含文本，图像（可能需要滑块）。在正常的每个内容隐藏。当用户点击其中一个项目时。此内容隐藏更改为showup。再次单击此项目时，必须再次隐藏此内容。在案例用户中，单击另一个不同的项目，必须隐藏以前的内容并显示新内容

任何人都有解决方案。感谢所有

下面的HTML标记说明链接pastebin

http://pastebin.com/raw.php?i=VVDsX6d0 P / S我在bootstrap最新版本上工作

Answer 1

这里试试这个

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>

Jquery代码：

$(function () {
$('.office-title').click(function () {
    $(this).next('div').slideToggle();

    $(this).parent().siblings().children().next().slideUp();
    return false;
});});

Css代码：

.office{display: none;}

点击此链接：demo

Answer 2

我查看了你的链接，你有一些模拟的不需要的多余代码，所以我使用了一些通用的id和类，但是你会发现这样做你正在寻找并且非常顺利。

HTML

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

jquery的

$(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);
            }
        });
    });
});

CSS

.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;
}

您可以在行动Here

中看到它

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

希望这有帮助

Jquery单击显示内容幻灯片

2 个答案: