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

你可以做的是为你的元素添加一个class属性，这样可以更容易地使用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现在将自身附加到具有title类属性的元素上的每个click事件，并显示具有description类属性的最近div。

// jQuery 1.7+

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

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

1 个答案:

Demo