Question

我直截了当地说，我有几个盒子，我想让它们展开并折叠，并在其标题中设置一个切换。此切换是一个具有精灵背景的锚标记，此精灵图像的顶部指向顶部，底部指向下方。你可以猜出他们的意思，我希望他们的状态能够被改变（第一个用于崩溃，第二个用于扩展）

盒子的结构是这样的：

     <section class="box2">
        <header class="box-head">
            <div class="box-title fr">              
                <span class="box-icon"></span>
                <h3 class="box-title-text">Title Title</h3>
            </div>

            <a class="box-toggle fl active" href="#">A</a>
            <br class="cfx" />
        </header>

            <div class="box-content">
                <img src="img/chart-1.png" alt="" />
                                    //Content or collapsing data goes here
            </div>

    </section>

我使用了一种最直接的方法来实现这种效果。您可以在下面看到以下CSS和jQuery代码。（当图标指向顶部时，我选择活动类作为默认值）

JS：

 <script type="text/javascript">
        $("a.box-toggle").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });

    //Slide up and down on click
    $("a.box-toggle").click(function(){
        $(this).next("div.box-content").slideToggle("slow");
        });
    });
    </script>

CSS：

.widget-toggle { 
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    width: 18px; height: 9px;
    margin-top: 15px;
    margin-left: 13px;
    background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}

.widget-toggle.active { 
    background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}

感谢您的大力帮助：）

编辑编号＃1：

感谢@Recode，他们的提示工作得很好，但根据我的解释，你可以在这张图片中看到。我想用一个Icon来展示它的状态 enter image description here

Active指向顶部，Inactive指向底部，当我想要折叠框时我显示“活动”，当我想要展开框时，我显示“非活动”。使用此代码，我设法在默认情况下显示活动（我将每个框的类设置为手动激活，如果有更好的方法将默认类设置为活动或其他任何请注意。）当我单击它时，框折叠并且图标转换为非活动状态。当我再次单击框展开但图标保持相同状态（非活动并指向底部）。

点击后： enter image description here

以下是代码：

$("a.box-toggle").click(function(){
    $(this).addClass("active");
    }, function () {
    $(this).addClass("inactive");
});

非常感谢，再次。

Answer 1

请使用：

$(document).ready(function() {
    //Slide up and down on click
    $("a.box-toggle").click(function(){
        $(this).toggleClass('inactive');
        $(this).parent().next("div.box-content").slideToggle("slow");
    });
});

http://jsfiddle.net/Recode/DLxaB/

更新小提琴：http://jsfiddle.net/Recode/DLxaB/1/

Answer 2

试试这个：FIddle

jQuery代码：

$("a.box-toggle").on('click', function () {
    $('div.box-content').slideToggle(200).toggleClass('active');
});

.slideToggle() .toggleClass()

使用切换折叠/展开内容框

2 个答案: