Question

当我点击菜单按钮时，我的菜单无法在手机上打开。

以下是我正在使用的代码：

$('#responsive-menu-button').click(function() {
    if($('#responsive-menu-container').hasClass('slide-left')) {
        $(this).removeClass('slide-left');
    } else {
        $(this).addClass('slide-left');
    }
$('#responsive-menu-container').toggle();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-accessible responsive-menu-boring" type="button" aria-label="Menu"><span class="responsive-menu-box"><span class="responsive-menu-inner"></span></span></button>

    <div id="responsive-menu-container" class="
      slide-left  ">
      <div id="responsive-menu-wrapper">
        <div id="responsive-menu-title">Menu</div><ul id="responsive-menu" class=""><li id="responsive-menu-item-12" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item responsive-menu-item responsive-menu-current-item"><a href="http://www.fanfarejulianarossum.nl/" class="responsive-menu-item-link">Home</a></li></ul><div id="responsive-menu-search-box">
            <form action="http://www.fanfarejulianarossum.nl" class="responsive-menu-search-form" role="search">
              <input type="search" name="s" placeholder="Search" class="responsive-menu-search-box">
            </form>
          </div>  </div>
    </div>

我无法在任何地方找到答案，当我点击按钮responsive-menu-container

时，我需要在responsive-menu-button上删除该课程

Answer 1

您可以使用touchstart事件

$('#responsive-menu-button').on('click touchstart', function() {
    if($('#responsive-menu-container').hasClass('slide-left')) {
        $(this).removeClass('slide-left');
    } else {
        $(this).addClass('slide-left');
    }
    $('#responsive-menu-container').toggle();
});

Answer 2

检查代码中的$（this）。似乎$（this）是$（'#response-menu-button'）而不是$（'#response-menu-container'），所以你将.slide-left类添加到按钮，而不是容器。 / p>

$('#responsive-menu-button').click(function() {
  if ($('#responsive-menu-container').hasClass('slide-left')) {
    $('#responsive-menu-container').removeClass('slide-left');
  } else {
    $('#responsive-menu-container').addClass('slide-left');
  }
  $('#responsive-menu-container').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="responsive-menu-button" class="responsive-menu-button responsive-menu-accessible responsive-menu-boring" type="button" aria-label="Menu"><span class="responsive-menu-box"><span class="responsive-menu-inner"></span></span>
</button>

<div id="responsive-menu-container" class="
  slide-left  ">
  <div id="responsive-menu-wrapper">
    <div id="responsive-menu-title">Menu</div>
    <ul id="responsive-menu" class="">
      <li id="responsive-menu-item-12" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item responsive-menu-item responsive-menu-current-item"><a href="http://www.fanfarejulianarossum.nl/" class="responsive-menu-item-link">Home</a>
      </li>
    </ul>
    <div id="responsive-menu-search-box">
      <form action="http://www.fanfarejulianarossum.nl" class="responsive-menu-search-form" role="search">
        <input type="search" name="s" placeholder="Search" class="responsive-menu-search-box">
      </form>
    </div>
  </div>
</div>

您的代码似乎工作正常，因为您最后有$（'#response-menu-container'）。toggle（），但我认为这是误导性的 - 它只涵盖其他错误。

Answer 3

试试这个...

 $('#responsive-menu-button').click(function() {
        if($('#responsive-menu-container').hasClass('slide-left')) {
            $(this).removeClass('slide-left');
        } else {
            $(this).addClass('slide-left');
        }

    $('#responsive-menu-container').toggle();
  });

在此处找到您的代码，使其正常工作https://jsfiddle.net/1w57uxx3/

单击按钮时菜单不会打开

3 个答案: