Question

所以我有一个投资组合网站。可点击的6个方格。我希望点击项目下方的网站向下滑动，我希望它通过向下滑动内容来显示此组合项目的详细信息。

我想要以下链接中描述的效果。但这仅适用于一个项目。我有6.如果单击项目1，内容会向下滑动，您将获得详细信息。我想要的是当你点击第2项时，第1项的细节会向上滑动，第2项的细节会向下滑动。

How to slide down a div then .fadeIn() the content and vice versa?

一个例子：http://www.applove.se 向下滚动到此站点上的投资组合，然后单击项目以查看我想要实现的目标。

这是我的HTML。在这之上有一个UL，但出于某种原因，当我复制它时，整个事情就搞砸了。

            <li class="port_list">
                <div id="port_img1"> intro_img1 </div>
            </li>

            <li class="port_list">
                <div id="port_img2"> intro_img2 </div>
            </li>   

            <li class="port_list">
                <div id="port_img3"> intro_img3 </div>
            </li>       

    </ul>

    <ul id="wrapper_portfolio">
            <li class="port_list">
                <div id="port_img4"> intro_img4 </div>
            </li>

            <li class="port_list">
                <div id="port_img5"> intro_img5 </div>
            </li>   

            <li class="port_list">
                <div id="port_img6"> intro_img6 </div>
            </li>       

    </ul>

CSS将确保前三个li显示水平。最后三个也在前三个水平显示。我不是处理图像，而是使用每个div的背景图像。

编辑：

迈克让我弄乱我的HTML和CSS。 Zo在这里。 http://jsfiddle.net/StillD/bDMxs/

粉红色的盒子是我的投资组合物品。在他们下面，我想要提供您单击的项目组合项目的详细信息（整个浏览器宽度）。因此，当您单击项目组合项目1时，其下方的3个项目（水平显示）应向下滑动，以便为项目组合项目1的详细信息腾出空间。如果单击项目2，项目1的详细信息将消失，以便为详细信息腾出空间第2项，等等。

（细节现在用鸟的图片表示）。

Answer 1

我想我明白你想要什么。这是一个非常简单的jsfiddle例子。

http://jsfiddle.net/yRcnz/1/

基本上你需要在每个ul之前使用某种元素，这样用户就可以点击了。一旦你有一个区域让用户与之交互，一些简单的javascript就可以切换（）ul元素的显示。

$('.expandable-ul li').click(function() {
    $(this).children('img').toggle();
});

$('.expandable-ul img').toggle();

对于多个项目，Div在点击时向下滑动，然后反转

1 个答案: