求助：如何通过JavaScript实现下拉菜单移除透明度？

Hey Stefan, let's break down why your dropdown-based transparency fix isn't working and get it sorted out.

The Core Issue #

The problem here is a conflict between your scroll/resize/load events and the dropdown show/hide events. When you trigger the dropdown, you remove the transparency class—but if the scroll event fires right after (even from a tiny scroll, or just the page settling), it’ll overwrite that change based on the scroll position. Similarly, when you close the dropdown and add the class back, the scroll event might immediately remove it if you’re below the 100px threshold.

The Solution: Add a Dropdown State Flag #

We’ll introduce a simple flag to track whether any dropdown is open. This way, the scroll event will respect the dropdown’s state and avoid overwriting your intended transparency changes.

Here’s the revised code with explanations:

$(document).ready(function(){
    var stoptransparency = 100; // When to disable transparent menu on scroll
    var lastScrollTop = 0, delta = 5;
    let isDropdownOpen = false; // Flag to track if any dropdown is expanded

    $(this).scrollTop(0);

    // Handle scroll/load/resize events with dropdown state check
    $(window).on('scroll load resize', function() {
        var position = $(this).scrollTop();
        
        // Only adjust transparency if no dropdown is open
        if (!isDropdownOpen) {
            $('#transmenu').toggleClass('transparency', position <= stoptransparency);
        }
        lastScrollTop = position;
    });

    // Dropdown show event: Disable transparency and mark dropdown as open
    $('#transmenu .dropdown').on('show.bs.dropdown', function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
        $('#transmenu').removeClass('transparency');
        isDropdownOpen = true;
    });

    // Dropdown hide event: Re-enable transparency (if needed) and mark dropdown as closed
    $('#transmenu .dropdown').on('hide.bs.dropdown', function() {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
        isDropdownOpen = false;
        // Reset transparency based on current scroll position after closing
        var position = $(window).scrollTop();
        $('#transmenu').toggleClass('transparency', position <= stoptransparency);
    });
});

Key Changes Explained: #

• isDropdownOpen Flag: This variable acts as a gatekeeper for the scroll event. If a dropdown is open, the scroll event won’t touch the transparency class.
• Simplified Class Toggling: Used toggleClass with a condition to make the code cleaner—this adds/removes the class in one line based on the scroll position.
• Post-Dropdown Reset: When a dropdown closes, we manually check the scroll position and reset the transparency state, ensuring it matches the user’s current scroll position.

This should ensure that whenever a dropdown is open, the menu stays opaque for readability, and when it closes, the transparency behavior reverts to your original scroll-based logic.

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