Question

我正在尝试使用该div中包含的按钮单击div下方的表单元素。

当您再次单击该按钮时，我希望该表单为slideUp（）;

所以我的HTML就像

<div class='cell'><div class='enquiry-button'></div></div>
<div class='cell'><div class='enquiry-button'></div></div>
<div class='cell'><div class='enquiry-button'></div></div>

我试过这个：

$( ".enquiry-button" ).click( function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(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");

});

但点击功能会使用类查询按钮触发每个元素（正如您所期望的那样）。

有更简单的方法吗？

更新

问题是我的<div class='cell'>元素是由另一组JS脚本动态加载的。在我的主HTML文件中，我在文档中调用了上面的单击功能。似乎动态元素没有“准备好”，因为使用$(window).load解决了这个问题。

Answer 1

可能你没有添加另一个，但在第三次点击时切换幻灯片？需要隐藏新表单以允许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个元素，它将没有可点击的项目，所以应该没问题。请注意，您应该注释绑定到文档，而是使用更接近的包装器（如div包装器等）绑定到：example

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

Answer 2

检查点击元素的父元素是否包含表单子元素，如果有，则slideToggle()！

Live Demo

的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;
}

Answer 3

您可以在第一次点击后向.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/

Answer 4

如果您当时只想要打开一个表单，那么这里是working example。

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

Answer 5

你非常接近......你在这里错过的是，一旦你点击一个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/

您可以看到我在此处有一个提醒，它会在每次点击后显示表单的长度，这样您就可以更轻松地了解后台发生的情况。

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

5 个答案:

Live Demo

的JavaScript / JQuery的

CSS