javascript - 使用 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 属性对公共(public)元素进行分组，并在绑定(bind)到它们的函数内进行 DOM 遍历以创建公共(public)逻辑并遵守 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