Question

我的手机菜单无法在移动设备上打开。只有在点击时才能在移动设备上看到的链接无法打开移动设备菜单。

当我点击下面的链接时，主菜单中的课程应该成为主菜单显示，但没有任何反应。我不确定为什么它不起作用

HTML：

  <a class="cmn-toggle-switch cmn-toggle-switch__htx open_close" href="javascript:void(0);"><span>Menu mobile</span></a>
  <div id="header_menu">
    <div class="main-menu">
      <ul>
        <li class="submenu">

JS

$('a.open_close').on("click",function() {
    $('.main-menu').toggleClass('show');
    $('.layer').toggleClass('layer-is-visible');
});
$('a.show-submenu').on("click",function() {
    $(this).next().toggleClass("show_normal");
});
$('a.show-submenu-mega').on("click",function() {
    $(this).next().toggleClass("show_mega");
});
if($(window).width() <= 480){
    $('a.open_close').on("click",function() {
    $('.cmn-toggle-switch').removeClass('active')
});
}

我认为错误在JS中，但我不确定。有关详情，该网站的链接为http://www.wanderintown.com/

Answer 1

问题是您在HTML加载完成之前调用.on（）函数。所以按钮现在不存在。

试着把它放进去：

$(window).load(function() { // makes sure the whole site is loaded
  $('a.open_close').on("click",function() {
    $('.main-menu').toggleClass('show');
    $('.layer').toggleClass('layer-is-visible');
  });
});

如何在移动设备上显示div的toggleClass？

1 个答案: