4

我直奔主题，我有几个框，我希望它们可以展开和折叠，并在它们的标题中设置一个切换开关。这个切换是一个带有精灵背景的锚标签，这个精灵图像的顶部指向顶部，底部指向下方。你可以猜到它们的意思，我希望改变它们的状态（第一个用于折叠，第二个用于展开）

盒子的结构是这样的：

     <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，他们的提示工作得很好，但是根据我的解释，你可以在这张照片中看到。我想用一个图标来展示它的状态 在此处输入图像描述

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

点击后： 在此处输入图像描述

这是代码：

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

非常感谢，再次。

4

2 回答 2

0

只需使用这个：

$(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/

于 2013-05-29T16:31:44.157 回答
0

试试这个：小提琴

jQuery代码：

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

.slideToggle() .toggleClass()

于 2013-05-29T16:37:05.703 回答