我有三个按钮一个接一个,当点击时,它们会展开下面的表单。
但是,当表单已经展开时,单击其他按钮之一时,不会折叠前一个表单(它只是将该表单展开到前一个表单的上方)。
下面的代码是当前用于处理此问题的标记,但我不确定如何扩展fadeToggle以在每次单击按钮时折叠其他窗体。
我将等待答案,但我猜我将需要添加一个类到包含窗体的div中,以便我们可以在单击时触发关闭事件。
<section class="cta-buttons">
<script>jQuery(document).ready(function(){jQuery("#callback").click(function () {jQuery("#callback-form").fadeToggle();});});</script>
<div id="callback"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
<script>jQuery(document).ready(function(){jQuery("#enquiry").click(function () {jQuery("#enquiry-form").fadeToggle();});});</script>
<div id="enquiry"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
<script>jQuery(document).ready(function(){jQuery("#booknow").click(function () {jQuery("#booknow-form").fadeToggle();});});</script>
<div id="booknow"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>
<?php // FORMS TRIGGERED ON CLICK ?>
<div id="callback-form" style="display: none;"><?php vfb_pro( 'id=1' ); ?></div>
<div id="enquiry-form" style="display: none;"><?php vfb_pro( 'id=2' ); ?></div>
<div id="booknow-form" style="display: none;"><?php vfb_pro( 'id=3' ); ?></div>
</section>
2条答案
按热度按时间uelo1irk1#
您应该使用
class
属性来对公共元素进行分组,并在绑定到它们的函数中使用DOM遍历来创建公共逻辑并遵守DRY原则。第一个
要停止当前显示的表单,请先淡出再放大,请尝试以下操作:
Example fiddle
anauzrmj2#
我将向所有表单添加一个类(例如“.formHidden”)。
然后,每次单击表单时,
(this当然,代码只是针对第一个。您需要在其他的类上复制它)。当然,您需要将适当的css
display:none
应用于“.formHidden”类。编辑:
一种更简洁的方法:
然后呢
假设
<form>
元素是父div中唯一的子元素!检查此JSFIDLE:(http://jsfiddle.net/h7H5H/5)(英文)