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