0

我试图让一个表单元素在单击该 div 中包含的按钮时在该 div 下向下滑动。

当您再次单击该按钮时，我希望表单能够滑动（）；

所以我的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");

});

但是 click 函数会在每个带有类 enquiry-button 的元素上触发（如您所料）。

有没有更简单的方法来做到这一点？

更新

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

4

5 回答 5

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 包装器等）来绑定：示例

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

于 2013-08-14T12:33:26.163 回答
0

检查被点击元素的父元素是否有表单子元素，如果有，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;
}
于 2013-08-14T12:13:24.460 回答
0

您可以.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/

于 2013-08-14T12:30:53.243 回答
0

如果您当时只希望打开一个表单，这是一个工作示例。

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');
    }
});
于 2013-08-14T12:36:20.713 回答
0

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

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

于 2013-08-14T12:42:02.440 回答