Question

我对jquery场景完全不熟悉，所以在尝试解决这个问题时遇到了一些麻烦。我的问题是：
我正在为一个项目创建一个网站，这个网站基于一个正方形（700px×700px），分为4个较小的正方形 - 全部350px乘350px。我想要做的是让每个较小的正方形都有一个覆盖它们的面板，当点击它们时，移开以显示它们背后的内容。左侧的两个面板将向左滑动并消失，右侧的两个面板将向右滑动并消失。
如果可能的话，我希望一次只有一个面板消失。因此，当一个人点击一个新面板时，前一个面板将滑回原位，再次隐藏其内容。

非常感谢任何帮助！

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（例如，＆＃34; .clicked＆＃34;）一次只能放置一个面板，则可以设置.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/

Answer 2

尝试使用Jquery UI Accordion http://jqueryui.com/accordion

您可以创建多个可折叠面板，并设置是否一次打开一个面板（如果需要，可以设置多个面板）。

我的建议是看看这个，做一些研究，如果你有更多问题在stackoverflow上发布一个更具体的问题。

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

2 个答案: