Question

我正在尝试建立一个移动响应“汉堡包”菜单。我正在使用的html是......

.menu_closed {
  color: red;
}
.menu_open {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $('span.menu_closed').click(function() {
    $('ul.menu').toggle('1000');
    $(this).toggleClass("menu_open menu_closed");
  });
</script>
<span class="menu_closed">&#9776;</span>
<ul class="menu" id="menu">
  <ul class='section' id='section_1'>
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
      <ul>
        <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a>
        </li>
        <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a>
        </li>
        <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a>
        </li>
        <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_2'>
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
      <ul>
        <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_5'>
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
      <ul>
        <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
        </li>
        <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
        </li>
        <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
        </li>
      </ul>
    </li>
  </ul>
  <ul class='section' id='section_4'>
  </ul>
  <div class='bot'>
    <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a>
      <br />
      <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a>
    </p>
  </div>
</ul>

出于某种原因，它没有正常关闭和打开。我不知道出了什么问题。

如果有人能提供帮助，我将不胜感激。

杰克

Answer 1

$('span.menu_closed').click(function() {应该引用标准菜单类，例如.hamburger，而不是.menu_closed，因为如果您将.menu_closed更改为.menu_open，那么.menu_closed否存在的时间更长，你将失去点击处理程序。

$(this).toggleClass("menu_open menu_closed");应该只切换open或closed这样的类。从技术上讲，你所做的事情可以在类名为.menu_open的情况下正常工作，并且您更新此$.toggleClass()行以切换类.menu_closed，但最后会得到一个名为{{1}的元素}。最好将菜单命名为不可知的东西，然后切换它是否打开。

还在菜单中添加了span.menu_open.menu_closed，以便向用户显示您可以点击该元素。

在cursor: pointer;中包装你的jQuery代码，这将导致页面等待运行JS，直到DOM准备好。这是必需的，因为你的JS出现在页面上的其余HTML之前。

并将您的点击处理程序从使用$(function() {});（已弃用）更改为$.live()。 $.on()为deprecated in 1.7 and removed in 1.9，jQuery建议现在使用$.live()附加事件处理程序。

$.on()

.hamburger {
  color: red;
  cursor: pointer;
}
.open {
  color: blue;
}

Answer 2

hey man i tried your code it's working fine here is

https://jsfiddle.net/L0vnd4ay/

打开和关闭移动响应式菜单

2 个答案: