个人中心
gpt4 book ai didi

带有 jQ​​uery 导航元素转换的 Javascript

转载 作者：行者123 更新时间：2023-11-30 16:22:20 24 4
gpt4 key购买 nike

这是我第一次尝试编写 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>

最佳答案

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>

关于带有 jQ​​uery 导航元素转换的 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34560415/

24 4 0
文章推荐： c - 访问数组的连续元素时会发生什么类型的缓存未命中？
文章推荐： c# - 如何调用派生类的方法？
文章推荐： c - 当内存不足时，如何防止变长数组崩溃？
文章推荐： c# - 保存对话框消息和空路径名
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com