friend 们大家好。
我需要为网站进行响应式设计。我在隐藏 <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>
最佳答案
您正在尝试在 .cats .catalog
元素上创建事件监听器,并尝试切换自身。
基本上,您是在“在其自身内查找元素”(.catalog
)。因此这行不通。
尝试在另一个元素上创建.cats
jQuery('.cats').on('click', function() {
jQuery(this).find('ul.catalog').slideToggle("slow");
});
关于javascript - 如何使用 jQuery 和 JS 隐藏/显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43757918/