开发者

Some trouble with jQuery

Is this html

  <div class='title centered'>SCE</div>
  <div class='description'>
    Magna tristique开发者_如何学C pulvinar porta montes, scelerisque
    odio montes porta habitasse, ut, arcu scelerisque vel, pellentesque
  </div>

I need to fade childer div (description) after clicking on parent (title).

  $('.title').click(function() {
    $(this).find('.description').fadeOut(fadeTime);
  })

What is wrong?


If you have this just once on your page, balalakshmi's answer will work. If you have more than one, go with this:

$('.title').click(function() {
  $(this).next('.description').fadeOut(fadeTime);
})

Note the use of next, which looks at the next element at the same level in the dom,instead of find which looks for decedents.

Finally, if the effect you are really trying to achieve is a toggle on title click, use slideToggle or one of the many fadeToggle plugins.


did you try with this?

$('.title').click(function() {
    $('.description').fadeOut(fadeTime);
  })


Use $.next() to find the next element and work with that

$('.title').click( function() {
    $(this).next('.description').fadeOut( fadeTime );
});


The wrong thing is that in your code "description" is not a child of "title".

I think balalakshmi's answer will do the job for you or you can use if you don't want to use "description" class as a selector:

  $('.title').click(function() {
    $(this).next().fadeOut(fadeTime);
  })


Try with:

$("#t_sce").click(function() {
    $("#d_sce").fadeOut(fadeTime);
});


I would have another parent div wrap around it.

<div class='item'>
   <div class='title centered'>SCE</div>
      <div class='description'>
        Magna tristique pulvinar porta montes, scelerisque
        odio montes porta habitasse, ut, arcu scelerisque vel, pellentesque
      </div>
   </div>
</div>

Then I would call using

$('.title').click(function() {
  $(this).parents('div.item').find('.description').fadeOut(fadeTime);
})

This code is not depended on the order of the discription div.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜