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

Collapse/Expand a content box with a toggle

提问by Ali Tabibzadeh

I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers. This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)

我进入正题，我有几个框，我希望它们可以通过位于标题中的切换开关展开和折叠。这个切换是一个锚标签，它有一个精灵背景，这个精灵图像的顶部指向顶部，底部指向下方。您可以猜出它们的意思，我希望它们的状态发生变化（第一个用于折叠，第二个用于展开）

The structure of the boxes are something like this :

盒子的结构是这样的：

     <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>

And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top)

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

JS :

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 :

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;
}

Thanks for your huge help :)

感谢您的大力帮助:)

Edit No. #1 :

编辑号#1：

Thanks to @Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon

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

Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" . With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.) When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom).

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

And after clicking :

点击后：

Here is the Code :

这是代码：

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

Thanks a lot, Again.

非常感谢，再次。

采纳答案by kelunik

Just use this:

只需使用这个：

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

updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/

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

回答by Sourabh

Try this: FIddle

试试这个：小提琴

jQuery code:

jQuery代码：

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

.slideToggle().toggleClass()

.slideToggle().toggleClass()