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

Question

我有三个并排的按钮，当点击它们时，它们会在下面展开一个表单。

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

以下代码是当前用于处理此问题的标记，但我不确定如何扩展 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>

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

我会为所有表单添加一个类（例如“.formHidden”）。

然后，每次单击表单时，您都会这样做

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

（当然，此代码仅适用于第一个。您需要在其他代码上复制它）。 而且，当然，您需要将适当的 css display:none 应用于“.formHidden”类。

---

编辑：

更简洁的方法：

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