多个按钮用于 JQuery 滑动切换一个 div

Question

我在网页上有一系列按钮和一个表单。

表单在页面加载时隐藏，我使用slideToggle 在按下按钮时显示表单。

html是这样的：

<div id="links">
    <button id="btn_01" class="tog active">Open</button>
    <button id="btn_02" class="tog">Open</button>
    <button id="btn_03" class="tog">Open</button>
</div>

<div id="form">
  <button id="close">Close</button>
  <form>Form contents...</form>
</div>

到目前为止，我拥有的 JS（从一个按钮触发）是：

$("#form").hide();

$("button.tog").bind("click", function(){

    if($("button.active").length) $("button.active").removeClass("active");
    if($("#form").is(":visible") == true) { $("#form).slideUp();

    $(this).addClass('active');
    $("#form").slideToggle();
});

$("buttton#close").click( function {
    $('#form').slideUp();
});

当点击任何按钮时，如果#form 打开它应该向上滑动，并且应该从旧按钮中删除活动类并添加到刚刚被点击的按钮上。

还应该能够从#form 中单击button#close 来触发slideToggle（并从#links 按钮中删除活动类。

我对 JQuery 还很陌生，并且在代码顺序方面遇到了问题。

当#form 打开并单击原始按钮时，slideToggle 函数关闭然后重新打开 div。

我已经尝试了很多这样的变体，但无法让它正常工作。

任何帮助将不胜感激。

干杯，莱昂

JSFiddle 样机：http://jsfiddle.net/leonharris/9mKTc

Answer 1

试试

$(document).ready(function () {

    var $frm = $('#form').hide();

    var $bts = $("button.tog").on('click', function () {
        var $this = $(this)
        $bts.filter(".active").not(this).removeClass('active');
        $this.toggleClass('active');

        if ($this.hasClass('active') && $frm.is(':visible')) {
            $frm.stop(true, true).slideUp(function () {
                $(this).slideDown()
            });
        } else {
            $frm.stop(true, true).slideToggle();
        }
    });
    $bts.filter('.active').click();

    $("#close").click(function () {
        $bts.filter(".active").removeClass('active');
        $frm.slideUp();
    });
});

演示：Fiddle