javascript - 单击链接时如何显示ul？

Question

我在处理这个简单的 jQuery 代码时遇到了问题。

我的 HTML:

<ul class="menu-affix nav-hover">
    <li id="toggle-area"><a>Areas</a></li>
    <li id="toggle-industry"><a>Indrustry</a></li>
</ul>

当点击 li 区域时，我想在同一页面中添加一个类“open”的另一个元素:有它:

<li id="show-area" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon ic-casa ic-bar"></i>Áreas de Atuação</a>
        <ul class="dropdown-menu">
          <li class="title-dropdown">CNI</li>
          <li><a tal:attributes="href python:urlById(1208)">Competitividade</a></li>
          <li><a tal:attributes="href python:urlById(770)">Desenvolvimento Associativo</a></li>
          <li><a tal:attributes="href python:urlById(1250)">Economia</a></li>
          <li><a tal:attributes="href python:urlById(1251)">Infraestrutura</a></li>
          <li><a tal:attributes="href python:urlById(1252)">Inovação</a></li>
          <li><a tal:attributes="href python:urlById(1253)">Internacionalização</a></li>
          <li><a tal:attributes="href python:urlById(1254)">Leis e Normas</a></li>
          <li><a tal:attributes="href python:urlById(1255)">Meio Ambiente</a></li>
          <li><a tal:attributes="href python:urlById(1256)">Pequenas Empresas</a></li>
          <li><a tal:attributes="href python:urlById(1257)">Política Industrial</a></li>
          <li><a tal:attributes="href python:urlById(426)">Propriedade Intelectual</a></li>
          <li><a tal:attributes="href python:urlById(1259)">Trabalho</a></li>
          <li><a tal:attributes="href python:urlById(1260)">Tributação</a></li>
          <li class="title-dropdown">SISTEMA INDÚSTRIA</li>
          <li><a tal:attributes="href python:urlById(1261)">Educação e Tecnologia</a></li>
          <li><a tal:attributes="href python:urlById(1262)">Qualidade de Vida</a></li>
          <li><a tal:attributes="href python:urlById(1263)">Responsibilidade Social</a></li>
        </ul>
      </li>

和我的 jQuery 代码:

$(document).ready(function(){
  $('#toggle-area').click(function(){
    if (! $('#show-area').hasClass('open')){
      $('#show-area').addClass('open');
    }
    else {
      $('#show-area').removeClass('open');
    }
  });
});

这不起作用，我缺少什么？ 提前致谢。

Answer 1

$(document).ready(function(){
  $('#toggle-area').click(function(){
    $('#show-area').toggleClass("open");
  });
});

这将删除该类(如果存在)或添加它(如果不存在)。