Question

我有一个响应式菜单，一切正常，只有当我调整菜单大小，用一些点击测试它，然后调整大小或放在任何其他视口大小，菜单消失，我必须刷新网站有菜单了。

这是jquery

$(document).ready(function () {

    $('.menu > li:has(ul)').addClass('menu-dropdown-icon');
    //Checks if li has sub (ul) and adds class for toggle icon - just an UI

    $(".menu").before("<a href=\"#\" class=\"menu-mobile\">Izbornik</a>");

    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
    //Done this way so it can be used with wordpress without any trouble

    $(".menu > li").hover(function (e) {
        if ($(window).width() > 943) {
            $(this).children("ul").stop(true, false).slideToggle(600);
            e.preventDefault();
        }
    });
    //If width is more than 943px dropdowns are displayed on hover

    $(".menu > li").click(function () {
        if ($(window).width() <= 943) {
            $(this).children("ul").fadeToggle(150);
        }
    });
    //If width is less or equal to 943px dropdowns are displayed on click

    $(".menu-mobile").click(function (e) {
        $(".menu").slideToggle(300);
        e.preventDefault();
    });
    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story

});

我对代码进行了评论，所以如果有人愿意帮助我，可以看看我做了什么。

的CSS：

    .menu {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.4rem;
  display: block;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu > li {
  float: left;
  background-color: #1a2b3e;
  padding: 0;
  margin: 0;
}
.menu > li > a {
  text-decoration: none;
  padding: .7em 3em;
  display: inline-block;
  outline: 0 none;
  color: #fff;
}
.menu > li:hover {
  background: blue;
}
.menu > li:hover > a {
  color: #fff;
}
.menu > li > ul {
  display: none;
  width: 100%;
  background: #fff;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
  list-style: none;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, 0.3);
  background-color: #1a2b3e;
}
.menu > li > ul > li {
  margin: 0;
  padding: 15px;
  list-style: none;
  background: none;
  float: left;
  width: 33.333%;
}
.menu > li > ul > li a {
  padding: .2em 0;
  color: #fff;
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  text-transform: capitalize;
}
.menu > li > ul > li:last-child {
  width: 17%;
}
.menu > li > ul > li:last-child > ul {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
.menu > li > ul > li:nth-child(2) {
  width: 49.666%;
}
.menu > li > ul > li:nth-child(2) > ul {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
.menu > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 0;
  margin-top: 20px;
  list-style: none;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
.menu > li > ul > li > ul > li {
  width: 100%;
  margin-bottom: 10px;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari */
  page-break-inside: avoid;
  /* Theoretically FF 20+ */
  break-inside: avoid-column;
  /* IE 11 */
  display: inline-block;
  /* Actually FF 20+ */
}
.menu > li > ul > li > ul > li a {
  border: 0;
  color: #fff;
  font-weight: 300;
  font-size: 1.4rem;
  text-transform: none;
  font-weight: 600;
}
.menu > li > ul > li > ul > li > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu > li > ul > li > ul > li > ul > li {
  margin: 0;
  width: 100%;
  float: left;
}
.menu > li > ul > li > ul > li > ul > li a {
  font-weight: normal;
  font-size: 1.2rem;
}
.menu > li > ul > li > ul > li > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li > ul > li > ul > li > ul > li > ul > li {
  margin: 0;
  width: 100%;
  float: left;
  margin: -5px 0;
}
.menu > li > ul > li > ul > li > ul > li > ul > li:last-child {
  margin-bottom: 5px;
}
.menu > li > ul > li > ul > li > ul > li > ul > li a {
  text-transform: capitalize;
  font-weight: normal;
  font-size: .9rem;
}

@media only screen and (max-width: 959px) {
  .menu-container {
    width: 100%;
  }
  .menu-mobile {
    display: block;
  }
  .menu-dropdown-icon:before {
    display: block;
  }
  .menu {
    display: none;
  }
  .menu > li {
    width: 100%;
    float: none;
    display: block;
  }
  .menu > li a {
    padding: 1.5em;
    width: 100%;
    display: block;
  }
  .menu > li > ul {
    position: relative;
  }
  .menu > li > ul > li {
    float: none;
    width: 100%;
    border: 0;
    display: block;
  }
  .menu > li > ul > li:first-child {
    margin: 0;
  }
  .menu > li > ul > li > ul {
    position: relative;
  }
  .menu > li > ul > li > ul > li {
    float: none;
  }
}

这是实时链接http://jsfiddle.net/v12z4e66/1/

当您将菜单调整为移动媒体查询并切换菜单时，当您调整回桌面时，菜单不存在，您必须刷新页面

Answer 1

slideToggle()为DOM添加内联样式。当您点击.mobileMenu时，devtools中的html会显示：

<ul class="menu" style="display: none;">
    ...
</ul>

而不是在jQuery中使用动画使用类，例如： addClass('show-on-menu);或toggleClass('show-on-mobile);

然后在您的样式中，您可以在媒体查询中执行您想要的操作，因此可以在屏幕上忽略.show-on-mobile＆gt; 960像素;

查看更新的jsFiddle： http://jsfiddle.net/v12z4e66/3/

调整大小后，jquery菜单消失

1 个答案: