Question

在我的网站上，我有一个联系人部分，因为我不想要一个占用大量空间的表格，我打算有一个常规按钮说＆＃34;点击我＆＃34;或者＆＃34;试试我＆＃34;按下它后，按钮会扩展（不像弹出窗口或图库缩放），更像是更改宽度和高度，以便它可以转换为表格，读者可以只填写信息。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '0px',
            height: '300px',
            width: '300px'
        });
    });
});
</script> 
</head>
<body>

这或多或少是我打算做的，我有一个按钮，按下按钮后按钮会缩放，这样就显示了名称，电子邮件，主题字段。

这是我的按钮。

<div class="mbr-section__container">
     <a href="#" class="btn btn-default btn-lg" role="button">Take me there!</a
</div>

Answer 1

这是一个可能的解决方案，您可以轻松地在点击时删除按钮。我只是检查表单高度并为表单持有者的高度设置动画：

$("button.form-btn").on('click',function(){
  var formHeight = $(".form-holder form").height();
    $( this ).animate({opacity:0});
    $(".form-holder").animate({height:formHeight});

});

演示链接：https://jsfiddle.net/keinchy/ua3sc09w/1/

将按钮转换为表单（展开）

1 个答案: