Question

我有一个菜单，我希望当窗口宽度为＆gt; = 767px时可以使用悬停访问其下拉列表，并且当窗口宽度为＆lt;时，可以使用click事件访问它。 767px。

仅当我刷新页面时它才起作用，否则只有悬停事件才有效。

JQUERY

(function ($) {

    'use strict';

    function getWindowWidth() {
        var windowWidth = 0;
        if (typeof(window.innerWidth) === 'number') {
            windowWidth = window.innerWidth;
        }
        else {
            if (document.documentElement && document.documentElement.clientWidth) {
                windowWidth = document.documentElement.clientWidth;
            }
            else {
                if (document.body && document.body.clientWidth) {
                    windowWidth = document.body.clientWidth;
                }
            }
        }
        console.log(windowWidth);
        return windowWidth;
    }

    function widthStatement() {
        if (getWindowWidth() >= 767) {
            $('.menu > ul > li').on({
                mouseenter: function () {
                    $(this).children('ul').stop(true, false).show();
                },
                mouseleave: function () {
                    $(this).children('ul').stop(true, false).hide();
                }
            });
        } else if (getWindowWidth() < 767) {
            $('.menu > ul > li').click(function () {
                $(this).children('ul').stop(true, false).toggle();
            });
        }
    }

    $(document).ready(getWindowWidth, widthStatement);
    $(window).on('resize', widthStatement);

}($));

CSS

.menu {
    margin: 0 auto;
    width: 80%;
    background: #e9e9e9;
}

.menu:before, .menu:after {
    display: table;
    content: ' ';
}

.menu:after {
    clear: both;
}

.menu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul > li {
    float: left;
    margin: 0;
    padding: 0;
}

.menu ul > li:hover {
    background: #f0f0f0;
}

.menu ul > li > a {
    display: block;
    padding: 1.5em 2.5em;
    color: #444;
}

.menu ul > li > ul {
    position: absolute;
    left: 0;
    display: none;
    width: 100%;
    background: #f0f0f0;
}

.menu ul > li > ul > li {
    padding: 1.5em;
    width: 25%;
}

.menu ul > li > ul > li > a {
    padding: 0;
    border-bottom: 1px solid #ccc;
    color: #444;
}

.menu ul > li > ul > li > ul {
    position: relative;
    display: block;
    padding-top: 1em;
}

.menu ul > li > ul > li > ul > li {
    padding: 0;
    width: 100%;
}

.menu ul > li > ul > li > ul > li > a {
    padding: .5em 0;
    border: 0;
    font-size: .9em;
}

HTML

<div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Research</a>
            <ul>
              <li><a href="#">Undergraduate research</a></li>
              <li><a href="#">Masters research</a></li>
              <li><a href="#">Funding</a></li>
            </ul>
          </li>
          <li><a href="#">Something</a>
            <ul>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">News</a>
        <ul>
          <li><a href="#">Today</a></li>
          <li><a href="#">Calendar</a></li>
          <li><a href="#">Sport</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Empty sub</a></li>
        </ul>
      </li>
    </ul>
  </div>

演示：http://codepen.io/riogrande/pen/yJVNMq

Answer 1

您使用.ready（）的方式存在问题。无论如何，当文档准备就绪时，你不需要调用getWindowWidth（），因为你的widthStatement（）为你做了。只需删除它即可离开：

$(document).ready(widthStatement);

http://codepen.io/anon/pen/YWpXOp

窗口调整大小功能不起作用

1 个答案: