使用相同类的jQuery click函数

Question

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)

At the moment my jQuery is as follows.

$('.qacollapsed').hide();
$('.qa').click(function () {
    $('.qacollapsed').slideToggle();
    $(this).toggleClass('active');
});

Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)

Is there a way for it to only drop down the one that is clicked?

the HTML

<div class="qa">
<h4 class="question"> </h4>
</div>

<div class="qacollapsed">
<p>  </p>
</div>

Answer 1

Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object

$('.qa').click(function () {
    $('.qacollapsed', this).slideToggle();
    //You could do $(this).find('.qacollapsed').slideToggle();
    $(this).toggleClass('active');
});

Answer 2

It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..

Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, eg:

$('.qa').click(function () {
   $(this)                     // start with the clicked element
       .find('.qacollapsed')   // find child .qacollapsed elements only
       .slideToggle();
   $(this).toggleClass('active');
});

This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods .

Answer 3

查看jQuery选择器 ，为什么不只使用$(this) ？

Answer 4

$('.qacollapsed').hide();
$('.qa').click(function () {
    $(this).toggleClass('active').next().slideToggle();
});

Answer 5

Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie

 Var showIt = $(this).attr('id') + '_answer'
 $('.qacollapsed').not('#'+showIt).hide();
 $('#'+showIt).slideToggle;

That will hide all the divs without that ID and show the required one.

Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.