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

原文 标签 javascript jquery html css navigation

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

我做了这个无法正常工作的jQuery,它可以在悬停时工作,但是当您调整窗口大小时,它仍然会在悬停时触发而不是单击。

jQuery的:

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


调整窗口大小或使其小于800px时,如何将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 - 如何对从 JQuery Handlebar 生成的数据进行排序?

javascript - 为什么以下字符串中大于17的值匹配?

javascript - WebSocket 硬件依赖吗?

html - 在单个 Bootstrap 行中使用两列,如何将文本垂直居中?

jquery - 如何使用 jQuery "onClick"钩子(Hook)和 event.preventDefault();

jquery - 如何通过remoteFunction传递g:datePicker值?

html - 使用 MS Word 打开 HTML 的垂直文本

javascript - 表单提交后使用Javascript更新表格-在IE和Edge中不起作用

javascript - Javascript添加textarea大小

php - 在JavaScript中使用PHP函数