jquery - jquery 水平手风琴点击收缩

Question

我有这个脚本用于水平手风琴。您可以在此处查看功能：http: //jsfiddle.net/vXpPg/

我也希望在点击时关闭打开的幻灯片。

任何帮助，将不胜感激。谢谢！

Answer 1

干得好：

http://jsfiddle.net/vXpPg/1/

我修改了您的click功能以检查您首先单击的部分的宽度。如果这个宽度等于你写的，maxWidth那么我们知道我们只想折叠它（将其宽度更改为minWidth设置）。如果不是，那么我们知道它必须是一个小部分，并且需要像平常一样扩展（您已经拥有的代码）。

$("ul li").click(

function() {
    /*
     * I added this
     */
    if ($(this).width() == maxWidth) {
        $(this).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
    } else {
        /*
         * You had this
         */
        $(lastBlock).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
        $(this).animate({
            width: maxWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
    }
    lastBlock = this;
});​

Answer 2

我认为这应该解决它：

lastBlock = $("#a1");
maxWidth = 450;
minWidth = 50;

$("ul li").click(

function() {
    if (lastBlock != this) {
        $(lastBlock).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
        $(this).animate({
            width: maxWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
        lastBlock = this;
    } else {
        $(this).animate({
            width: minWidth + "px"
        }, {
            queue: false,
            duration: 400
        });
    }
});​