Question

这是我第一次尝试编写一个js来控制一个未能＆＃34;滑动＆＃34;这个HTML5导航元素进出手机屏幕的左边缘我希望得到一些帮助，让它工作和一些抛光。感谢

＆＃13;

$("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});
   }
});

＆＃13;

nav {
   width: 80%;
   position: fixed;
   background-color: white;
   left: 0;
   top: 2em;
}

＆＃13;

   <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>

＆＃13;

Answer 1

您可以使用max-width:和animate()

在css中

nav{
   max-width : 0px;
}

在js

$("header .ui-btn-left").click(function() {
   var Width = $("nav").outerWidth();
   if (Width == 0) {
      $("nav").animate({"max-width": "1000px"} , 1000);
   } else {
      $("nav").animate({"max-width": "0px"} , 1000);
   }
});

Simple Demo

Answer 2

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>

使用导航元素

2 个答案: