我有一个正在处理的网站，当我尝试执行 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>最佳答案
我的帖子中的评论提供了答案。
您可能需要让您的 .user-menu 或 .js-dropdown 类具有 position: absolute。
一旦我这样做了，它就解决了问题。
关于jquery - 在下拉菜单上被下推的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38103798/