阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      二级菜单的实现方法

      CSS用hover来实现;javascript用事件委托来实现(观察者模式);

      .nav li:hover ul{
      display: block;
      width: 100px;
      /*如果不写宽度,就会水平排列*/
      padding: 0;
      }
      .nav li:hover ul li ul{
      display: none;
      /*隐藏三级菜单的*/
      }
      

      JS的写法如下;

      var tool = new Tool;
      var oDiv2 = document.getElementById("div2");
      document.onmouseover = function (e) {
          e = e || window.event;//处理事件兼容性;
      var tar = e.target || e.srcElement;//事件源;
      var xiaomi = tar.getAttribute("xiaomi");//监听的对象;
      var ch = tool.getCss("height", oDiv2);
      if (xiaomi === "true") {//以属性来判断;
      if (ch <= 200) {
      move.call(oDiv2, 200)
              }
          } else {
      if (ch > 0) {
      move.call(oDiv2, 0)
              }
      
          }
      };
      function move(target) {
      var that = this;
      _move();
      function _move() {
      var start = tool.getCss("height", that);//要在内部,不能写在外面
      clearTimeout(that.timer);
      that.timer = setTimeout(_move, 10);
      if (start >= target) {
      tool.setCss(that, "height", start - 10);
      if (start - 10 < target) {
      tool.setCss(that, "height", target);
      return;
                  }
              } else if (start < target) {
      tool.setCss(that,"height", start + 10);
      if (start + 10 >= target) {
      tool.setCss(that, "height", target);
      return;
                  }
              } else {
      return;
              }
          }
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      本文目录
      目录