CSS

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区域时，我想在同一页面中添加另一个“开放”类的元素：有它：

<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");
  });
});

如果有课程，则会删除该课程，如果不是，则添加课程。

Answer 2

添加一个类并不意味着它会显示/隐藏元素。

CSS

你需要CSS来实现这个目标：

#show-area {
   display:none;
}

#show-area.open {
   display: block; 
}

以上是一种非常简单的方法，可以使节目/隐藏发生。它说默认情况下隐藏ID显示区域的元素（显示：无）

然后它说当具有ID show-area的元素有一个类＆＃39; open＆＃39;它显示（显示：块）

Refer to this website for help

的jQuery

实现你想要的另一种方法是使用jQuery来显示和隐藏元素

if (! $('#show-area').hasClass('open')){
   $('#show-area').show();
}
else {
   $('#show-area').hide();
}

这需要：

$(document).ready(function(){
   $('#show-area').hide();
});

OR

在你的css中：

#show-area {
   display:none;
}

点击链接时如何显示ul？

2 个答案:

CSS

的jQuery