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

时间：2017-05-03 10:49:47

标签： javascript jquery html responsive-design

和你好朋友。

我需要为网站制作响应式设计。我在<h2>标记后隐藏元素有一个问题。基本上我正在尝试为<div class="gadget cats">添加一个事件监听器，它将在点击时显示和隐藏以下元素。 最有趣的部分是这个项目在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>

3 个答案:

答案 0 :(得分：1)

您正尝试在.cats .catalog元素上创建一个事件监听器并尝试切换自己。

基本上你是“在自己身上找到一个元素”（.catalog）。因此，这不起作用。

尝试在另一个元素上创建只说.cats 

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

答案 1 :(得分：0)

从选择器.catalog中删除此类，并将selectot添加为.cats h2并获取parent div并从div中找到ul.catalog并应用slideToggle。 

jQuery('.cats h2').on('click', function() {
  jQuery(this).parent('div').find('ul.catalog').slideToggle("slow");
});
<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>

答案 2 :(得分：0)

<强> CSS     .cats {min-height：500px;} 的的jQuery 

jQuery('.cats').on('click', function() {
  jQuery(this).find('ul.catalog').slideToggle("slow");
});
相关问题
最新问题