代码之家 › 专栏 › 技术社区 › Fred J.

带有导航元素jQuery转换的Javascript

jquery javascript

Fred J. · 技术社区 · 10 年前

这是我有史以来第一次尝试编写js来控制DOM元素,但未能将这个HTML5导航元素“滑入”或滑出手机屏幕的左边缘。
我希望能得到一些帮助,让它发挥作用,并进行一些润色。谢谢

$("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>

2 回复 | 直到 10 年前

Patrick Evans 10 年前

例如,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>

Mohamed-Yousef 10 年前

你可以使用 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