javascript - jquery窗口调整大小不起作用

标签 javascript jquery html css navigation

我正在尝试制作一个菜单,其中子菜单在悬停时打开,但在移动设备上(宽度 < 800)应在点击时触发子菜单。

我制作了这个不起作用的 jquery,它在悬停时有效,但是当您调整窗口大小时,它仍然在悬停时触发,而不是在单击时触发。

j查询:

$(document).ready(function () {

    $(".menu ul li").hover(function () {
        $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
    });

});
$(window).resize(function () {
    if ($(window).width() <= 800) {
        $(".menu ul li").click(function () {
            $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
        });
    }
}); 

CSS:

.menu {
  width: 100%;
  background: #333;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu > ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu > ul > li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu > ul > li > a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: block;
  outline: 0 none;
}
.menu > ul > li > ul {
  display: none;
  background: #333;
  padding: 20px 30px;
  position: absolute;
  width: 100%;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .menu ul > li {
    float: none;
    width: 100%;
  }
  .menu ul > li > ul {
    position: relative;
  }
}

HTML:

<div class="menu">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    This is also mega menu
                </ul>
            </li>
            <li><a href="#">Who are we?</a>
                <ul>
                    This is mega menu
                </ul>
            </li>
            <li><a href="#">Services</li></a>
                <li><a href="#">Contact</li></a>
        </ul>
    </div>

当窗口调整大小或低于 800 像素时,我如何使用 jquery 将悬停状态更改为单击状态?

最佳答案

使用这个脚本

$(document).ready(function () {

       $(".menu ul li").hover(function () {
          if ($(window).width() > 800) {

                $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
          }

        });
         $(".menu ul li").click(function () {
          if ($(window).width() <= 800) {

                $('li > ul').not($(this).children("ul").slideToggle(200)).hide();
          }
        });

});

关于javascript - jquery窗口调整大小不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33166053/

相关文章:

javascript - HTML JavaScript 随机数选择

javascript - 通过 CSS 类或直接(通过 DOM)修改 HTML 元素显示的更好做法?

javascript - 如何在没有数据标记的情况下对 Accordion 使用 Bootstrap 3 Collapse?

javascript - 将所有 href 值更改为数组值理论与实践

javascript - Jquery Accordion 菜单 - 关闭然后打开

javascript - 基于分配给它的特定 css 类的另一个 div #id 隐藏带有 css #id 的 div

javascript - 使用ajax调用时如何实现next/back函数?

javascript - 无法在 AngularJS 模板中循环数组

javascript - 仅在 IE10 上加载页面时,AngularJS 表单字段脏且无效

javascript - 如何在 jQuery 中强制失去表单中所有字段的焦点