按钮位置获取异常：下拉菜单CSS定位失效问题求助

Hey there, let's walk through why your absolute positioning isn't working for that dynamically loaded dropdown, and get it sorted out.

First, let's spot the key issues in your code: #

• Invalid selector: You used $('class') which doesn't target any element—you need to use the actual class of your dropdown, .dropdown_menu.
• Async Ajax timing mistake: Your CSS setup runs immediately when the click happens, but Ajax is asynchronous. That means the dropdown element hasn't been added to the DOM yet, so your css() call does nothing. You have to wait until the Ajax content is loaded and appended before setting styles.
• Non-existent offset().right: jQuery's offset() only returns top and left values. There's no right property here—if you need to align the dropdown to the right edge of the trigger, you'll have to calculate it manually.
• Missing z-index: Without a high enough z-index, your dropdown might be hidden behind other elements on the page.

Here's the corrected code: #

$(document).on('click', '.get-dropdown-menu', function(e) {
    e.preventDefault(); // Stop default click behavior (like link jumps)
    const $trigger = $(this);
    
    // Clean up existing dropdowns to avoid duplicates
    $('.dropdown_menu').remove();

    // Fetch dropdown content via Ajax
    $.ajax({
        url: 'your-content-url', // Replace with your actual API/HTML endpoint
        method: 'GET',
        success: function(htmlContent) {
            // Append the loaded content to the body and store the element
            const $dropdown = $(htmlContent).appendTo('body');
            
            // Now set the positioning—dropdown exists in DOM now!
            $dropdown.css({
                position: 'absolute',
                top: $trigger.offset().top + $trigger.outerHeight(),
                bottom: 'auto',
                left: $trigger.offset().left,
                // Uncomment below to align dropdown to the RIGHT of the trigger
                // left: $trigger.offset().left + $trigger.outerWidth() - $dropdown.outerWidth(),
                zIndex: 9999 // Ensure dropdown stays on top
            });
        },
        error: function() {
            console.error('Oops, failed to load dropdown content!');
        }
    });
});

Extra checks if it's still not working: #

1. Check for CSS conflicts: Open your browser's dev tools (F12), select the dropdown element, and look at the Styles tab. If your position/top/left styles are crossed out, there's a higher-priority CSS rule overriding them. Adjust your selector specificity (e.g., use body .dropdown_menu instead of just .dropdown_menu) to fix this.
2. Trigger element positioning: Make sure the .get-dropdown-menu element isn't inside a parent with position: fixed if you want the dropdown to position relative to the viewport. If the parent is fixed, you'll need to adjust the top/left calculations to match.

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