单击按钮后，附加表单，第二次单击时向下滑动并向上滑动

您可能没有添加另一个，而是在第三次单击时切换幻灯片？需要隐藏新表单以允许slideDown，缓存单元格选择器以供重用。

$(".enquiry-button").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    var cell = $(this).closest('.cell');
    if (cell.find('.enquiry-form').length) {
        cell.find('.enquiry-form').slideToggle();
    } else {
        cell.append(
            "<div class='enquiry-form'>" +
            "<form>" +
            "Your Email: <input type='text' name='email'>" +
            "First name: <input type='text' name='firstname'>" +
            "<br>Last name: <input type='text' name='lastname'>" +
            "<br>Contact No: <input type='text' name='lastname'>" +
            "<br>Postcode: <input type='text' name='postcode'>" +
            "<br>Optional Comment: <input type='textarea' name='comment'>" +
            "<input type='submit' value='Submit'>" +
            "</form>" +
            "</div>");
        cell.find('.enquiry-form').hide().slideDown("slow");
    }
});

实际样品：http://jsfiddle.net/GMjNS/

注意，如果您使用动态元素，请将第一行更改为：

$(document).on("click", ".enquiry-button", function (e) {

如果你有0个元素，它将没有可点击的项目，所以这应该是可以的。注意，你应该Note绑定到文档，但使用更紧密的包装器（如div包装器等）来绑定到：示例

$('#mywrapperelementid').on("click", ".enquiry-button", function (e) {

你离。。。您在这里错过的是，一旦单击div，您就构建了一个表单元素。单击之前，元素长度将为0，单击之后，长度将开始增加。基于此，您可以toggle the slider。

<div class='cell'>
    <div class='enquiry-button'>Enq1</div>
</div>
<div class='cell'>
    <div class='enquiry-button'>Enq2</div>
</div>
<div class='cell'>
    <div class='enquiry-button'>Enq3</div>
</div>

JS:

    $( ".enquiry-button" ).click( function(e) {
e.preventDefault();
e.stopPropagation();
alert("length::"+$(this).parents('.cell').find('form').length);
if($(this).parents('.cell').find('form').length==0){
$(this).closest( '.cell' ).append(
"<div class='enquiry-form'>" +
"<form>" +
    "Your Email: <input type='text' name='email'>" +
    "First name: <input type='text' name='firstname'>" +
    "<br>Last name: <input type='text' name='lastname'>" +
    "<br>Contact No: <input type='text' name='lastname'>" +
    "<br>Postcode: <input type='text' name='postcode'>" +
    "<br>Optional Comment: <input type='textarea' name='comment'>" +
    "<input type='submit' value='Submit'>"+
"</form>" +
"</div>");
$(this).closest( '.cell' ).find(".enquiry-form:last").slideDown("slow");
}else{
$(this).closest( '.cell' ).find(".enquiry-form:last").slideToggle("fast");
}
});

在这里找到小提琴：http://jsfiddle.net/JPUTy/5/

你可以看到，我在这里有一个警报，它会在每次点击后显示表单的长度，这将使你更容易了解后台发生的事情。

检查单击的元素的父级是否有窗体子级，如果有，则为slideToggle()！

现场演示

JavaScript/JQuery

$(".enquiry-button").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    if (!$(this).parents('.cell').find('form').length) {
        $(this).closest('.cell').append(
            "<div class='enquiry-form'>" +
            "<form>" +
            "Your Email: <input type='text' name='email'>" +
            "First name: <input type='text' name='firstname'>" +
            "<br>Last name: <input type='text' name='lastname'>" +
            "<br>Contact No: <input type='text' name='lastname'>" +
            "<br>Postcode: <input type='text' name='postcode'>" +
            "<br>Optional Comment: <input type='textarea' name='comment'>" +
            "<input type='submit' value='Submit'>" +
            "</form>" +
            "</div>");

        $(this).closest('.cell').find(".enquiry-form:last").slideDown("slow");
    } else $(this).closest('.cell').find(".enquiry-form:last").slideToggle("slow");

});

CSS

.enquiry-form {
    display:none;
}

您可以在第一次单击后将某些类添加到.cell，并在第二次单击后删除类：

    $(".enquiry-button").click(function (e) {
        var $this = $(this),
            $parent = $this.parent();
            if (!$parent.hasClass('opened')) {
                if (!$parent.find('form').length) {
                    $parent.append('<form>Input: <input type="text"/></form>');
                }
                $parent.addClass('opened');
            } else {
                $parent.removeClass('opened');
            }
    });

示例：http://jsfiddle.net/uNwLn/

如果您一次只想打开一个表单，下面是一个工作示例。

jQuery:

$('.enquiry-button').click(function(e){
    $('.cell .enquiry-form:visible').slideUp('slow', function(){
         $(this).remove();
    });
    if( $(this).parent('.cell').hasClass('active') )
    {
        $(this).parent('.cell').removeClass('active');
    }
    else
    {
        $('.cell').removeClass('active');
        $(this).parent('.cell').addClass('active');
        $('.cell.active').append("<div class='enquiry-form'>" +
    "<form>" +
    "Your Email: <input type='text' name='email'>" +
    "First name: <input type='text' name='firstname'>" +
    "<br>Last name: <input type='text' name='lastname'>" +
    "<br>Contact No: <input type='text' name='lastname'>" +
    "<br>Postcode: <input type='text' name='postcode'>" +
    "<br>Optional Comment: <input type='textarea' name='comment'>" +
    "<input type='submit' value='Submit'>"+
    "</form>" +
"</div>");
        $('.cell.active .enquiry-form').hide().slideDown('slow');
    }
});