移动端单选框关联CSS显示内容异常及jQuery替代方案咨询

Absolutely—switching to jQuery makes perfect sense here. Your current CSS-only approach has limitations, especially on mobile: fixed max-height values can cause content overflow, and the adjacent sibling selector logic doesn't give you control over how the revealed content interacts with surrounding elements (like your submit button). jQuery lets you handle the reveal/hide behavior dynamically, adjust layout spacing, and ensure elements don't overlap, which will fix those mobile usability problems.

Step 1: Simplify the CSS #

First, replace your existing .reveal-if-active CSS with this. We'll let jQuery handle the visibility and animations, and add mobile-friendly spacing to prevent overlap:

.reveal-if-active {
    display: none; /* Hide by default */
    margin: 15px 0; /* Add spacing to avoid overlapping the submit button */
    padding: 10px 20px;
    background-color: #f8f9fa; /* Light background for better readability on mobile */
    border-radius: 4px;
}

/* Optional: Add a subtle animation for reveal */
.reveal-if-active.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

Step 2: Refactor the jQuery Code #

Update your main.js file to handle the reveal logic, form validation, and ensure mobile-friendly behavior. This code is cleaner, more maintainable, and fixes the overlap issue:

$(document).ready(function() {
    // Initialize: Hide all reveal sections and disable their inputs
    $('.reveal-if-active').hide();
    $('.require-if-active').attr({
        'required': false,
        'disabled': true
    });

    // Function to reset all reveal sections and inputs
    function resetRevealSections() {
        $('.reveal-if-active').hide().removeClass('show');
        $('.require-if-active').attr({
            'required': false,
            'disabled': true
        });
    }

    // Handle Preloved stall selection
    $('#stallType-Preloved').on('change', function() {
        if ($(this).is(':checked')) {
            resetRevealSections();
            $(this).siblings('.reveal-if-active').show().addClass('show');
            $('#c-rail-yes, #c-rail-no').attr({
                'required': true,
                'disabled': false
            });
        }
    });

    // Handle Craft stall selection
    $('#stallType-Craft').on('change', function() {
        if ($(this).is(':checked')) {
            resetRevealSections();
            $(this).siblings('.reveal-if-active').show().addClass('show');
            $('#craftName').attr({
                'required': true,
                'disabled': false
            });
        }
    });

    // Handle Business stall selection
    $('#stallType-Business').on('change', function() {
        if ($(this).is(':checked')) {
            resetRevealSections();
            $(this).siblings('.reveal-if-active').show().addClass('show');
            $('#bizName, #insurance-yes, #insurance-no').attr({
                'required': true,
                'disabled': false
            });
        }
    });

    // Submit form logic (keep your existing code, just wrap it in document ready)
    var $form = $('form#bookingForm'),
        url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec';

    $('#submit-form').on('click', function(e) {
        var valid = this.form.checkValidity();
        if (valid) {
            e.preventDefault();
            $.ajax({
                url: url,
                method: "GET",
                dataType: "json",
                data: $form.serializeObject(),
                success: function() {
                    $('#redirect_page').modal('show');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                }
            });
        }
    });
});

Key Improvements for Mobile: #

• No fixed max-height: jQuery's show()/hide() adapts to the actual content height, so text won't get cut off.
• Spacing added: The margin: 15px 0 ensures revealed content doesn't overlap the submit button on small screens.
• Readable background: The light background color makes the extra fields stand out against the form, improving mobile readability.
• Smooth animation: The fade-in animation is gentle and doesn't cause layout jumps.

Why This Works Better Than CSS-Only: #

• Dynamic control: You can easily add more stall types later without adjusting complex CSS selectors.
• Form validation handling: The JS explicitly enables/disables required attributes, which is more reliable than relying on CSS to toggle validity.
• Layout flexibility: You can adjust spacing or add mobile-specific tweaks directly in the JS or CSS without breaking desktop behavior.

内容的提问来源于stack exchange，提问作者Luke