gpt4 book ai didi

javascript - 将按钮转换为表单(展开)

转载 作者:行者123 更新时间:2023-11-28 06:03:17 25 4
gpt4 key购买 nike

在我的网站中,我有一个“联系人”部分,由于我真的不希望表单占用大量空间,因此我打算有一个常规按钮,上面写着“单击我”或“试试我”,按下它后,按钮展开(不像弹出窗口或图库缩放)更像是更改宽度和高度,以便它可以转换为表单,并且读者可以填写信息。

<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>

最佳答案

这是一个可能的解决方案,您只需单击即可轻松删除按钮。我只是检查表单高度并为表单支架的高度设置动画:

$("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/

关于javascript - 将按钮转换为表单(展开),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37101863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com