javascript - 我需要帮助使用 jquery 创建 4 个可折叠面板

Question

<分区>

Answer 1

有很多方法可以完成您感兴趣的事情。CSS 过渡已经提到过。我已经包含了一个工作示例，但它非常基本 - 它应该让您朝着正确的方向前进。请查看下面的链接 - 它们提供了很多重要信息。

如果你有四个元素，而封面的主要功能只是覆盖，你可以使用:after(或:before)CSS pseudo-elements .如果您的面板是 li 元素，HTML 标记可能如下所示:

<ul>
    <li id="panelOne">One</li>
    <li id="panelTwo">Two</li>
    <li id="panelThree">Three</li>
    <li id="panelFour">Four</li>
</ul>

由于封面仅用于隐藏您的四个面板，并且它们是伪元素，因此您需要在 CSS 中设置它们的样式。您可以从设置 HTML 元素的样式开始:

ul {
    display: block;
    background: black;
    width: 700px;
    height: 700px;
    margin: 0 auto;
}
li {
    float: left;
    position: relative;
    background: white;
    border: 1px solid black;
    width: 350px;
    height: 350px;
}

然后为您的 :after 封面设置样式:

li:after {
    display: block;
    /*the background color is just to make the covers more visible */
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    content: "";
}

如果你use jQuery to add a class (例如，“.clicked”)一次到一个面板，您需要设置 .clicked 伪元素的样式，以便它们向左或向右移动:

li#panelOne.clicked:after, li#panelThree.clicked:after {
  -webkit-transform: translateX(-350px);
  -moz-transform:    translateX(-350px);
  -ms-transform:     translateX(-350px);
  -o-transform:      translateX(-350px);
  transform:         translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
  -webkit-transform: translateX(350px);
  -moz-transform:    translateX(350px);
  -ms-transform:     translateX(350px);
  -o-transform:      translateX(350px);
  transform:         translateX(350px);
}

并使用 jQuery 添加或删除类:

$( 'li' ).click(function(){
    //first remove the class from ALL panels
    $( 'li' ).removeClass( 'clicked' );
    //then add to the panel that's been clicked
    $(this).addClass( 'clicked' );
});

还有一步:由于您希望封面向左或向右滑动，因此您需要添加 CSS transitions实现这一目标。您可以将它们放在 :after 伪元素样式中:

-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;

这是在 jsfiddle 中的样子:http://jsfiddle.net/rt9d5/10/embedded/result/