这是我有史以来第一次尝试编写js来控制DOM元素的操作，该DOM元素未能将此HTML5 nav元素“滑入”和滑出手机屏幕的左边缘。
我将不胜感激，以帮助它正常工作并完善一些。谢谢
$("header .ui-btn-left").click(function() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
// $("nav").css({"left": -width});
$("nav").css({transition: left -width 0.3s ease});
} else {
$("nav").css({"left": 0});
}
});nav {
width: 80%;
position: fixed;
background-color: white;
left: 0;
top: 2em;
} <body>
<header data-role="header" data-position="fixed">
<a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
<h1>My App</h1>
</header>
<div data-role="content" class="contentDiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<main>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -->
</main><!-- /main content -->
<nav>
<ul data-role="listview" data-inset="true">
<li><a href="#"><img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
<li><a href="#"><img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany</a></li>
<li><a href="#"><img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
<li><a href="#"><img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland</a></li>
<li><a href="#"><img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a></li>
</ul>
</nav><!-- /side navigation -->
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button type="submit" data-theme="c">NO</button></li>
<li><button type="submit" data-theme="c">EXTRA</button></li>
<li><button type="submit" data-theme="c">YES</button></li>
</ul>
</div>
</footer><!-- footer -->
<script src="js/index.js"></script>
</body>CSS过渡属性不会采用实际的CSS属性值，例如left 30px。另外，您没有引用过渡属性值，因此您的控制台上实际上应该有语法错误。
$("nav").css({transition: 'left 0.3s ease'});
$("nav").css({"left": -width});
另外，除非您打算将过渡属性修改为其他设置，否则您只需将其置于CSS样式表中即可。
jQuery("button").click(function(){
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({"left": -width});
} else {
$("nav").css({"left": 0});
}
});nav {
position:fixed;
left:-300px;
top:0px;
width:300px;
transition:left 0.3s ease;
}
button {
position:fixed;
bottom:0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
some nav
</nav>
<button>show/hide</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句