Javascript 如何使用jQuery和JS隐藏/显示元素？

朋友们好

我需要作出响应的网站设计。我有一个问题需要在标记后隐藏元素。基本上，我正在尝试为添加一个事件侦听器，它将在单击时显示和隐藏以下元素。 最有趣的是，这个项目是基于CMS的，所以对我来说，不建议在HTML中进行更改。 伙计们，我需要你们的支持，请帮帮我

jQuery('.cats .catalog').on('click', function() {
  jQuery(this).find('ul.catalog').slideToggle("slow");
});

这里是HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gadget cats">
  <h2>Каталог</h2>
  <ul class="catalog menusm">

    <li class="passive">
      <a href="/cat/325"></a>
    </li>
    <li class="passive">
      <a href="/cat/402"></a>
    </li>
    <li class="passive">
      <a href="/cat/428"></a>
    </li>
    <li class="passive">
      <a href="/cat/129"></a>
    </li>
    <li class="passive">
      <a href="/cat/304"></a>
    </li>
    <li class="passive">
      <a href="/cat/405"></a>
    </li>
    <li class="passive">
      <a href="/cat/348"></a>
    </li>
    <li class="passive">
      <a href="/cat/404"></a>
    </li>
    <li class="passive">
      <a href="/cat/44"></a>
    </li>
    <li class="active">
      <a href="/cat/133"></a>
      <ul>
        <li>
          <a href="/cat/143"></a>
        </li>
        <li>
          <a href="/cat/153"></a>
        </li>
        <li>
          <a href="/cat/146"></a>
        </li>
        <li>
          <a href="/cat/151"></a>
        </li>
        <li>
          <a href="/cat/180"></a>
        </li>
        <li>
          <a href="/cat/181"></a>
        </li>
        <li>
          <a href="/cat/178"></a>
        </li>
        <li>
          <a href="/cat/179"></a>
        </li>
        <li>
          <a href="/cat/185"></a>
        </li>
        <li>
          <a href="/cat/208"></a>
        </li>
      </ul>
    </li>
    <li class="passive">
      <a href="/cat/126"></a>
    </li>
    <li class="passive">
      <a href="/cat/315"></a>
    </li>
    <li class="passive">
      <a href="/cat/82"></a>
    </li>
    <li class="passive">
      <a href="/cat/244"></a>
    </li>
    <li class="passive">
      <a href="/cat/247"></a>
    </li>
    <li class="passive">
      <a href="/cat/142"></a>
    </li>
    <li class="passive">
      <a href="/cat/197"></a>
    </li>
    <li class="passive">
      <a href="/cat/340"></a>
    </li>
    <li class="passive">
      <a href="/cat/414"></a>
    </li>
    <li class="passive">
      <a href="/cat/416"></a>
    </li>
    <li class="passive">
      <a href="/cat/415"></a>
    </li>
    <li class="passive"><a href="/cat/425">TRX</a></li>
  </ul>
</div>

---

从selector.catalog中删除该类，并将selectot添加为.cats h2，然后获取父div并从div中找到ul.catalog并应用slideToggleit

jQuery'.cats h2'.单击，函数{ jQuerythis.parent'div'。查找'ul.catalog'。slideToggleslow； }; Каталог

---

您正在尝试在.cats.catalog元素上创建一个事件侦听器，并尝试切换自身

基本上，您是在其自身中找到一个元素。catalog。因此，这是行不通的

尝试在另一个元素上创建，例如just.cats

CSS .cats{最小高度：500px；} jQuery

---

您正在尝试滑动哪个UL？您可以更改CSS吗？“this”是catalog元素，因此查找它将失败，因为您正在其中搜索。。jQuerythis.slideToggleslow；应该work@guradio整个块基本上都是。@Randy我可以添加动画，但我需要一个应该在单击时发生的事件。我用这种方法尝试过，但不起作用。我不明白为什么。我在这里测试过。检查并看看它是否在这里工作。非常感谢我的朋友。我看到它在代码笔中工作！这对你有用吗？如果可能，尝试更改JQuery版本。

jQuery('.cats').on('click', function() {
  jQuery(this).find('ul.catalog').slideToggle("slow");
});

jQuery('.cats').on('click', function() {
  jQuery(this).find('ul.catalog').slideToggle("slow");
});