Question

我正在尝试复制您在http://www.themenesia.com/themeforest/truehost/faq.html

上看到的动画

单击显示内容的加号，然后单击它（减号），它会隐藏文本。

所以，这就是我在代码中复制该行为所做的：

我的about.html

<div class="post-content wow fadeInUp"> 
    <ul class="toggle-list">
    <li>
    <h2 class="acc_active">My questions</h2>
    <div class="ac-content">My answer</div>
    </li>
    </ul>
</div>

我的style.css

从该模板的style.css复制此代码并添加到我的style.css

.toggle-list {
    list-style:none;
    margin:0;
    padding:0
}
.toggle-list li {
    margin-bottom:10px;
    background:#fff;
    border:1px solid #ddd;
    border-bottom:solid 3px #ddd
}
.toggle-list li h2 {
    -moz-user-select:none;
    -html-user-select:none;
    user-select:none;
    color:#555;
    font-size:16px;
    line-height:20px;
    font-family:Roboto, Arial, Helvetica, sans-serifr;
    padding:7px 20px 0 60px;
    font-weight:700;
    display:block;
    letter-spacing:normal;
    margin:10px 0
}
.toggle-list li .acc_active:hover {
    color:#777;
    background:url(../images/icon-slide-plus.png) 20px center no-repeat;
    padding-left:80px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s
}
.toggle-list .ac-content {
    display:none;
    padding:20px;
    border-top:solid 1px #e5e5e5
}
.acc_active {
    background:url(../images/icon-slide-plus.png) 20px center no-repeat;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    height:32px
}
.acc_noactive {
    background:url(../images/icon-slide-min.png) 20px center no-repeat
}
img {
    width:auto;
    height:auto
}
.img-left {
    float:left;
    margin:5px 15px 15px 0
}
.img-right {
    float:right;
    margin:5px 0 15px 15px
}

在我的custom.js中添加了切换功能，您可以在该模板的{。{3}}

的custom.js上看到

我无法在我的网站上获得效果。它立即显示答案，并且根本不显示问题。

如何复制该效果？有什么帮助吗？

Answer 1

你实际上不需要任何CSS。您只需使用jQuery即可轻松实现此目的。

<div class="toggle-item">
    <div class="toggle-header">
        Question text
    <div>
    <div class="toggle-content" style="display:none;">
        /* Answer here */
    </div>
</div>

然后，在jquery中：

$('#container').on('click', '.toggle-header', function(e) {
    var $target = $(e.currentTarget);
    $target.siblings('.toggle-content').slideToggle();
});

Answer 2

我认为您正在寻找的是使用jQuery .slideToggle()。

示例：

$( ".toggle-list li h2" ).click(function() {
    $(this).siblings(".ac-content" ).slideToggle( );
});

这里小提琴： http://jsfiddle.net/u2ec3ce2/10/

http://api.jquery.com/slidetoggle/

已更新为使用.siblings（）选择器，因为您在页面上有多个。

Answer 3

嗯，你把他们的css用于美学是有益的，但它对动画没有太大作用。

这里有一个js小提琴工作滑动上/下

http://jsfiddle.net/44v8yggp/

基本上，您使用height:'toggle',opacity:'toggle'

的jquery动画

jQuery隐藏或显示动画

3 个答案: