javascript - 打开和关闭移动响应菜单

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>

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

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

jack

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，但您最终会得到一个名为 span.menu_open.menu_closed 的元素。最好将菜单命名为不可知的东西，然后切换它是否打开。

还向菜单添加了 cursor: pointer; 以向用户指示您可以单击该元素。

将您的 jQuery 代码包装在 $(function() {}); 中，这将导致页面等待运行 JS，直到 DOM 准备就绪。这是必需的，因为您的 JS 在页面上的其余 HTML 之前出现。

并将您的点击处理程序从使用 $.live()(已弃用)更改为 $.on()。 $.live() 是 deprecated in 1.7 and removed in 1.9 , 并且 jQuery 建议现在使用 $.on() 来附加事件处理程序。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('.hamburger').on('click',function() {
       $('ul.menu').toggle(1000);
       $(this).toggleClass("open");
    });
  });
</script>
<span class="hamburger">&#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>