jquery - 在下拉菜单上被下推的内容

Question

我有一个正在处理的网站，当我尝试执行 javascript/jquery 下拉操作时，它会将我的网站内容向下推，我不太确定如何阻止它。

我尝试过使用 z 索引，但它似乎被忽略了，我不确定此时还能做什么。

    ; (function ($) {
    
        $.fn.dropdown = function (method) {
    
            var methods = {
    
                init: function (options) {
                    this.dropdown.settings = $.extend({}, this.dropdown.defaults, options);
                    return this.each(function () {
                        var $el = $(this),
                             el = this,
                             settings = $.fn.dropdown.settings;
    
                        // Hide initial submenus
                        $el.addClass('dropdown')
                        .find('>' + settings.triggerParentEl + ':has(' + settings.submenuEl + ')').addClass('dropdown-trigger')
                        .find(settings.submenuEl).addClass('dropdown-submenu').hide();
    
                        // Open on click
                        $el.off(settings.action).on(settings.action, settings.triggerParentEl + ':has(' + settings.submenuEl + ') > ' + settings.triggerEl + '', function () {
                            // Close click menu's if clicked again
                            if (settings.action == 'click' && $(this).parents(settings.triggerParentEl).hasClass('dropdown-open')) {
                                settings.beforeHide.call(this);
                                $(this).parents(settings.triggerParentEl).removeClass('dropdown-open').find(settings.submenuEl).hide();
                                settings.afterHide.call(this);
                                return false;
                            }
    
                            // Hide open menus
                            settings.beforeHide.call(this);
                            $('.dropdown-open').removeClass('dropdown-open').find('.dropdown-submenu').hide();
                            settings.afterHide.call(this);
    
                            // Open this menu
                            settings.beforeShow.call(this);
                            $(this).parents(settings.triggerParentEl).addClass('dropdown-open').find(settings.submenuEl).show();
                            settings.afterShow.call(this);
    
                            return false;
                        });
    
                        // Close if outside click
                        $(document).on('click', function () {
                            settings.beforeHide.call(this);
                            $('.dropdown-open').removeClass('dropdown-open').find('.dropdown-submenu').hide();
                            settings.afterHide.call(this);
                        });
    
                        // If hover
                        if (settings.action == 'mouseenter') {
                            $el.on('mouseleave', '.dropdown-open', function () {
                                settings.beforeHide.call(this);
                                $(this).removeClass('dropdown-open').find(settings.submenuEl).hide();
                                settings.afterHide.call(this);
                            });
                        }
    
                        settings.afterLoad.call(this);
                    });
                }
    
            };
    
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method "' + method + '" does not exist in dropdown plugin!');
            }
    
        };
    
        $.fn.dropdown.defaults = {
            action: 'click', // The open action for the trigger
            submenuEl: 'ul', // The submenu element
            triggerEl: 'a', // The trigger element
            triggerParentEl: 'li', // The trigger parent element
            afterLoad: function () { }, // Triggers when plugin has loaded
            beforeShow: function () { }, // Triggers before submenu is shown
            afterShow: function () { }, // Triggers after submenu is shown
            beforeHide: function () { }, // Triggers before submenu is hidden
            afterHide: function () { } // Triggers before submenu is hidden
        };
    
        $.fn.dropdown.settings = {};
    
    })(jQuery);

body {
        background-color: #f2f2f2;
        font-family: Lato;
        font-weight: 300;
        font-size: 16px;
        color: #555;
        -webkit-font-smoothing: antialiased;
        -webkit-overflow-scrolling: touch;
    }
    
    .row,
    .site-nav
    {
        *zoom: 1;
    }
    
        .row:before,
        .site-nav:before,
        .row:after,
        .site-nav:after {
            content: " ";
            display: table;
        }
    
        .row:after,
        .site-nav:after {
            clear: both;
        }
    
    .site-nav {
        background-color: #ffffff;
        border-bottom: solid 1px #D9D9DE;
        position: relative;
        z-index: 1000;
    }
        ..primary-menu-link {
            display: none;
            height: 60px;
        }
    
    .site-logo {
        display: inline-block;
        padding: 20px 40px;
        margin: 0;
        vertical-align: baseline;
        line-height: 19px;
        float: left;
    }
     .logo {
        font-size: 24px;
    }
    
    .nav-left {
        float: left;
    }
    
    .left {
        float: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .nav-for-screenreader {
        position: absolute;
        top: -100px;
        width: 1px;
        height: 1px;
        overflow: hidden
    }
    
    
    .primary-menu,
    .user-menu {
        float: left;
    }
    
    .primary-menu-link {
        display: none
    }
    
    .primary-menu {
        margin-left: 10px
    }
    
    .primary-menu-link {
        display: inline-block
    }
    
    .primary-menu-link a{
        color: #828587;
        display: inline-block;
        font-size: 14px;
        font-weight: bold
    }
    
    .primary-menu-link a:hover, a:hover {
        background-color: #F7FAFA
    }
    
    .primary-menu-link a{
            padding: 20px 15px
        }
    
        .primary-menu-link:last-child {
            margin-right: 30px
        }
    
    
    .user-menu-footer a,
    .user-menu-footer a:link,
    .user-menu-footer a:visited,
    .user-menu-footer a:active {
        color: #00A0FF
    }
    
    .user-menu-footer a:hover,
    .user-menu-footer a:link:hover,
    .user-menu-footer a:visited:hover,
    .user-menu-footer a:active:hover {
        color: #828587
    }
    
    a,
    a:link a:visited,
    a:active,
    button,
    button:visited,
    button:active {
        color: #00A0FF;
        text-decoration: none
    }
    
    body#admin_stats_index #stats_col .right {
        margin-left: 20px
    }
    
    .right {
        float: right
    }
    
    /* Dropdown stuff*/
    
    .dropdown {
        list-style: none;
    	padding: 0;
        position: absolute;
        margin: 0;
    }
    .dropdown .dropdown-trigger { position: relative; }
    .dropdown .dropdown-submenu {
        top: 100%;
        left: 0; /* dropdown left or right */
        display: none;
        min-width: 150px;
        list-style: none;
    	padding: 0;
    	margin: 0;
    }
    .dropdown .dropdown-open .dropdown-submenu { display: block; 
    
    }

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <link rel="shortcut icon" href="assets/ico/favicon.png">
            <title>Site!</title>
            <!-- Begin Load CSS-->
    
        <!-- Bootstrap core CSS -->
        <link href="~/Content/CSS/bootstrap.css" rel="stylesheet" type="text/css" />
    
        <!-- Custom styles -->    
        <link href="~/Content/CSS/test.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/CSS/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- End Load CSS-->
    
        <!-- Begin Load Fonts-->
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
        <!-- End Load Fonts-->
    
        <script src="~/Scripts/modernizr.custom.js"></script>
    </head>
    <body>
        <!-- Begin Menu -->
        <header class="site-nav">
            <h1 class="site-logo">
                <a class="logo" href="/nav/index">SITE!</a>
            </h1>
            <nav class="nav-left">
                <h2 class="nav-for-screenreader">Main menu</h2>
                <ul class="primary-menu">
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
                <li class="primary-menu-link"><a href="#">primary menu 1</a></li>
        <li class="primary-menu-link"><a href="/nav/about">primary menu 1</a></li>
                    </ul>
                </nav>
    
            <!-- Begin Profile links-->
            <nav class="nav-right">
                <h2 class="nav-for-screenreader">User menu</h2>
                <ul class="user-menu js-dropdown">
                    <li class="user-menu-tab">
                        <a class="js-tab-expand tab-expand" href="#">
                            <img alt="" class="avatar-circle-small" height="40" src="" style="height: auto;" width="40">
                        </a>
    
                        <ul>
                            <li id="nav-li">
    
                                <h3 class="dropdown-menu-header">
                                    My stuff
                                </h3>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
                            <li>
                                <a href="#">sub menu 1</a>
                            </li>
    
                    </li>
                </ul>
    
                <ul>
                    <li id="nav-li">
    
                        <h3 class="dropdown-menu-header">
                            Settings
                        </h3>
                    <li><a href="#">sub menu 1</a></li>
                    <li><a href="#">sub menu 1</a></li>
                    <li><a href="#">sub menu 1</a></li>
                    <div class="user-menu-footer">
                        <div class="row">
                            <div class="col">
                                You're logged in as <b>placeholder name</b>
                                <a href="/logout">Log out</a>
                            </div>
                        </div>
                    </div>
    
                    </li>
                </ul>
                </li>
                </ul>
            </nav>
            <!-- End Profile Links-->
        </header>
        <!-- End Menu-->
    
        <!-- Begin Banner News Update-->
        <div class="container">
            <div class="row mt">
                <div class="col-lg-8">
                    <h1>Begin the Lorem Ipsum!</h1>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                </div>
            </div>
        </div>
    
        <!-- Begin Scripts-->
        
        <script>
            $(document).ready(function () {
               
                // dropdown activation
                $('.js-dropdown').dropdown();
            });
        </script>
        <!-- End Scripts-->
    
    </body>
    </html>

Answer 1

我的帖子中的评论提供了答案。

您可能需要让您的 .user-menu 或 .js-dropdown 类具有 position: absolute。

一旦我这样做了，它就解决了问题。