我在使用 Adam Scott 创建的 bigSlide jquery 插件定位菜单时遇到问题。可点击链接(包装类)确实响应 css，但是菜单(面板类)却没有。因此，可点击的链接是距页面底部指定的 100 像素，但是菜单(滑动确定)仍然位于页面顶部。我觉得有一个直接的解决方案，但目前我没有想到。
代码是:
<!DOCTYPE HTML>
<html>
<head>
<title>Big Slide Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.big-slide.js"></script>
<script>
$(document).ready(function() {
$('.menu-link').bigSlide({});
});
</script>
<style>
.panel {
position: absolute;
bottom: 180px;
left: -15.625em;
width: 15.625em;
}
.wrap {
position: absolute;
bottom: 100px;
}
</style>
</head>
<body>
<nav id="menu" class="panel" role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Ballad of El Goodo</a></li>
<li><a href="#">Thirteen</a></li>
<li><a href="#">September Gurls</a></li>
<li><a href="#">What's Going Ahn</a></li>
</ul>
</nav>
<div class="wrap">
<a href="#menu" class="menu-link">☰</a>
</div>
</body>
</html>
最佳答案
从外观上看，bigSlide.js将默认内联样式添加到您的 nav.panel ，它会覆盖您的样式。
/* Added by bigSlide.js */
element.style {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
/* etc... */
}
他们似乎不提供options来处理你想要的，你肯定不想通过使用 !important 强制样式来覆盖元素上的默认库 JS 或 CSS .
如果我们从逻辑上考虑，他们添加的样式其实是有道理的，我们希望面板从上到下固定不变，不管它包含什么HTML。
因此，在您的情况下，我建议您将自定义样式添加到 <ul>元素。
.panel ul {
position: absolute;
bottom: 150px; /* Or whatever you want */
left:0;
}
如果这没有意义，请告诉我。
/*! bigSlide - v0.8.0 - 2015-04-28
* http://ascott1.github.io/bigSlide.js/
* Copyright (c) 2015 Adam D. Scott; Licensed MIT */
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";a.fn.bigSlide=function(b){var c=this,d=a.extend({menu:"#menu",push:".push",side:"left",menuWidth:"15.625em",speed:"300",state:"closed",activeBtn:"active",easyClose:!1,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},b),e={state:d.state},f={init:function(){g.init()},changeState:function(){"closed"===e.state?e.state="open":e.state="closed"},getState:function(){return e.state}},g={init:function(){this.$menu=a(d.menu),this.$push=a(d.push),this.width=d.menuWidth;var b={position:"fixed",top:"0",bottom:"0",height:"100%"};b[d.side]="-"+d.menuWidth,b.width=d.menuWidth,"closed"===d.state&&(this.$menu.css(b),this.$push.css(d.side,"0"));var e={"-webkit-transition":d.side+" "+d.speed+"ms ease","-moz-transition":d.side+" "+d.speed+"ms ease","-ms-transition":d.side+" "+d.speed+"ms ease","-o-transition":d.side+" "+d.speed+"ms ease",transition:d.side+" "+d.speed+"ms ease"};this.$menu.css(e),this.$push.css(e),c.on("click.bigSlide touchstart.bigSlide",function(a){a.preventDefault(),"open"===f.getState()?g.toggleClose():g.toggleOpen()}),d.easyClose&&a("body").on("click.bigSlide",function(b){a(b.target).parents().andSelf().is(c)||"open"!==f.getState()||g.toggleClose()})},toggleOpen:function(){d.beforeOpen(),f.changeState(),this.$menu.css(d.side,"0"),this.$push.css(d.side,this.width),c.addClass(d.activeBtn),d.afterOpen()},toggleClose:function(){d.beforeClose(),f.changeState(),this.$menu.css(d.side,"-"+this.width),this.$push.css(d.side,"0"),c.removeClass(d.activeBtn),d.afterClose()}};f.init()}});
$(document).ready(function() {
$('.menu-link').bigSlide();
});.panel {
position: absolute;
/*bottom: 180px;*/ /*not going to make a difference because it's overwritten */
left: -15.625em;
width: 15.625em;
}
.panel ul {
position: absolute;
bottom: 150px;
left: 0;
}
.wrap {
position: absolute;
left: 0;
bottom: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="menu" class="panel" role="navigation">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">The Ballad of El Goodo</a>
</li>
<li><a href="#">Thirteen</a>
</li>
<li><a href="#">September Gurls</a>
</li>
<li><a href="#">What's Going Ahn</a>
</li>
</ul>
</nav>
<div class="wrap">
<a href="#menu" class="menu-link">☰</a>
</div>关于javascript - 使用 bigSlide jquery 插件定位菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30045294/