Question

我有三个按钮彼此对齐，点击后，它们会展开下面的表格。

当表单已经展开但是，单击其他按钮之一时，不会折叠上一个表单（它只是将表单扩展到上一个表单之上）。

以下代码是目前处理此问题的标记，但我不确定如何在每次单击按钮时将fadeToggle扩展为折叠其他表单。

我等待答案，但我猜我需要在包含表单的div中添加一个类，以便我们可以在点击时触发close事件？

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

Answer 1

您应该使用class属性对公共元素进行分组，并在绑定到它们的函数中遍历DOM以创建公共逻辑并遵守DRY原则。考虑到这一点，试试这个：

<section class="cta-buttons">
    <div id="callback" class="trigger" data-rel="#callback-form"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
    <div id="enquiry" class="trigger" data-rel="#enquiry-form"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
    <div id="booknow" class="trigger" data-rel="#booknow-form"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>

    <?php // FORMS TRIGGERED ON CLICK ?>
    <div id="callback-form" class="form-container"><?php vfb_pro( 'id=1' ); ?></div>
    <div id="enquiry-form" class="form-container"><?php vfb_pro( 'id=2' ); ?></div>
    <div id="booknow-form" class="form-container"><?php vfb_pro( 'id=3' ); ?></div>
</section>

.form-container {
    display: none;
}

$(function() {
    $('.trigger').click(function() {
        $('.form-container').fadeOut();
        $($(this).data('rel')).fadeIn();
    });
});

要停止当前显示的表单，请淡出并再次尝试：

$('.trigger').click(function () {
    var currentId = '#' + $('.form-container:visible').prop('id');
    var newId = $(this).data('rel');
    $('.form-container').fadeOut();
    if (currentId != newId) {
        $(newId).fadeIn();
    }
});

Example fiddle

Answer 2

我会在所有表单中添加一个类（例如＆＃34; .formHidden＆＃34;）。

然后，每次单击表单时，都会执行

jQuery("#enquiry").click(function () {
    jQuery("#enquiry-form").fadeToggle();
    jQuery("#enquiry-form").removeClass("formHidden")
         .siblings().addClass("formHidden");
});

（当然，这段代码仅适用于第一个。您需要在其他代码上复制它）。当然，您需要将适当的css display:none应用于＆＃34; .formHidden＆＃34;类。

<小时/> 的修改：

更清洁的方法：

<section class="cta-buttons">
    <div id="callbacks">
        <div id="callback"><span class="btn"><?php _e( 'Request Callback', 'bonestheme' ); ?></span></div>
        <div id="enquiry"><span class="btn"><?php _e( 'Make Enquiry', 'bonestheme' ); ?></span></div>
        <div id="booknow"><span class="btn"><?php _e( 'Book Now', 'bonestheme' ); ?></span></div>
    </div>

    <div id="formcallbacks">
        <?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>
    </div>
</section>

然后

jQuery("#callbacks > div").click(function () {
    jQuery("#" + $(this).attr("id") + "-form").fadeIn()
         .siblings().fadeOut();
});

假设<form>元素是父div中的唯一子元素！

检查此JSFIDDLE :( http://jsfiddle.net/h7H5H/5）

使用jQuery fadeToggle打开新的div时关闭其他div

2 个答案:

更清洁的方法：