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打开，它应该是slideUp，活动类应该从旧按钮中删除并添加到刚刚点击的按钮上。

还应该能够点击#form中的＃关闭按钮以触发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

用于JQuery的多个按钮slideToggle一个div

1 个答案: