jquery - jQuery：操作多个 div 的独特功能（单击标题显示说明）

Question

我有一个包含许多显示产品（标题和描述）的 div 的页面，但描述是隐藏的，当单击标题时，描述具有 slideToggle 效果

DIVS HTML

<first><h4>Product1</h4></first>
<span><div><ocultar>Description</ocultar></div></span>

<second><h4>Product2</h4></second>
<span><div><ocultar2>Description</ocultar></div></span>

....
...
...
And third, fourth, etc...

我想要一个以独特功能优化此功能的功能..

$("ocultar").slideToggle("slow");
$("first").click(function () {
    $("ocultar").slideToggle("slow");
});
$("ocultar2").slideToggle("slow");
$("second").click(function () {
    $("ocultar2").slideToggle("slow");
});
...
...
...

我希望能帮助我！

Answer 1

您可以做的是向您的元素添加一个类属性，这将更容易使用 jQuery 进行操作。

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

这个 jQuery 现在会将自身附加到具有 class 属性的元素上的每个单击事件，title并显示具有 class 属性的最接近的 div description。

// jQuery 1.7+

$(".title").on('click',function(){
  $(this).next('div.description').slideToggle("slow");
});

演示